I found a solution that didn't work mainly that I want. Here it is:
topic url
and this solution works for me:
if(pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top)
{
$('#date').html($(this).find('.description').text());
return;
}
jsfiddle
but I want to change content description in gray box more smooth. I've tried to give animation in CSS for it, but it didn't work.
I modified your script a bit to detect when the text changes and when that happens I apply a small animation with jQuery. I set the opacity to a low value, e.g. opacity:0.4 and then make a quick animation back to opacity:1.
This will help your user to see easier the change in the text.
$(window).load(function () {
$(window).on('scroll resize', function () {
var pos = $('#date').offset();
$('.post').each(function () {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
var newDescr = $(this).find('.description').text();
var oldDescr = $('#date').html();
$('#date').html(newDescr);
if(newDescr !== oldDescr) {
$('#date').css('opacity', 0.4).animate({ 'opacity': '1',}, 200);
return;
}
}
});
});
$(document).ready(function () {
$(window).trigger('scroll'); // init the value
});
});
Demo here
Related
I am looking for to mimic the same scroll behavior the new Flickr website has at https://www.flickr.com/#section-1.
No matter how hard or fast you move your mouse scroll wheel the result is the same.
I know this is a kind of parallax website but I am more interested in the scroll control.
This is what I am doing right now using this plugin https://github.com/ultrapasty/jquery-disablescroll:
var mypos = $(window).scrollTop();
var up = false;
var newscroll;
$(window).scroll(function () {
newscroll = $(window).scrollTop();
if (newscroll > mypos && !up) {
$(window).disablescroll(); //disable scroll
//$('body').addClass('stop-scrolling'); //a css that inputs an overflow hidden
$('#video_bkg').stop().animate({
height: 'toggle',
opacity: 'toggle'
}, 500);
up = !up;
} else if(newscroll < mypos && up) {
$('#video_bkg').stop().animate({
height: 'toggle',
opacity: 'toggle'
}, 500, function() {
$(window).disablescroll('undo'); //reenable scroll
});
up = !up;
}
mypos = newscroll;
});
But none of this equals the Flickr's effect.
Here's an example that does this using the fullPage jQuery plugin.
Use
$(document).ready(function() {
$('#fullpage').fullpage();
});
to initialize the script.
I have a page with links on top. When a link is clicked it scrolls down to a particular section. For styling purposes, I had to write a small jQuery to have to land 100px above the actual section that it scrolls to. Now I need the pixel number to change depending on the media query. Is there something wrong about how this is written? The responsive part isn't working..
function offsetAnchor() {
if(jQuery(location.hash).length !== 0) {
if (jQuery(window).width() <= 350) {
window.scrollTo(window.scrollX, window.scrollY - 180);
}
else {
window.scrollTo(window.scrollX, window.scrollY - 100);
}
}
}
// This will capture hash changes while you are on the same page
jQuery(window).on("hashchange", function () {
offsetAnchor();
});
window.setTimeout(function() {
offsetAnchor();
}, 1);
the syntax should be :
jQuery(window).on("hashchange resize", function () {}
you can read more about .on() function at jQuery API
I have developed a jquery code that should let the menu hide a bit when I scroll down, and reappear as soon as I start scrolling up.
I had this perfectly working on my static html website, but I soon as I migrated it to wordpress, it stopped working. All my other js code works perfectly.. here is the part of code:
$(document).ready(function(){
$(window).scroll(function () {
var prevScroll;
var hidden = false;
var currentScroll = $(this).scrollTop();
if($("body").scrollTop() > 492){
if (prevScroll) {
console.log(currentScroll + " " + prevScroll);
console.log(hidden);
if (currentScroll < prevScroll && hidden) {
console.log('show');
$("#header-wrap").animate({marginTop: '0px'}, 200);
$("#menu").fadeIn("fast");
hidden=false;
} else if (currentScroll > prevScroll && !hidden) {
console.log(hidden);
console.log('hiding');
$("#header-wrap").animate({marginTop: '-60px'}, 200);
$("#menu").fadeOut("fast");
hidden=true;
}
} else if(!hidden){
console.log('first time');
$("#header-wrap").animate({marginTop: '-60px'}, 200);
$("#menu").fadeOut("fast");
hidden= true;
}
prevScroll = currentScroll;
}
else{
if(hidden){
console.log('show');
$("#header-wrap").animate({marginTop: '0px'}, 200);
$("#menu").fadeIn("fast");
hidden=false;
}
}
});
});
What is the problem with my code? I have it alongside all my js code in a script.js page.
Thanks
EDIT: I forgot to say that the menu is hiding , which is good, but it is not reappearing as soon as I scroll up. So part of the code is working, the other is not!
There's probably happen a conflict here between jQuery and Wordpress since both of them are using $ sign, try to use jQuery instead of $ or wrap your jQuery code inside:
jQuery(document).ready(function($){
$(window).scroll(function () {
// Your code here
});
});
I did it, the problem was that I was declaring var prevScroll;and var hidden = false; after the beginning of the function$(window).scroll(function () {, and not before it. Thanks for the help anyway..
I've posted it before but none got it what I need. I need to disable this script after certain scrolling page, let's say page is scrolled 30% this script is disabled.
The reason I need to disable this script is that after certain scrolling div used in script is showed over some other div elements when page is scrolled, so I need to disable script after certain scrolling.
<script>
$(window).load(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 60) {
$('.additional').css('position', 'fixed');
$('.additional').css('top', 70);
} else {
$('.additional').css('position', 'relative');
$('.additional').css('top', 0);
}
});
});
</script>
I've created a working function in this fiddle with a dummy outcome, as you didn't provide any code of your page structure.
It calculates the scroll percentage using $(window).scrollTop() and $(document).height() and then uses an if/else statement to toggle two outcomes based on the result of the calculation.
function moveScroller() {
var move = function () {
var calc = $(window).scrollTop() / $(document).height();
if (calc > 0.3) {
/*EG:*/ $('#content').css('backgroundColor', '#f00');
/*$('.additional').css('position', 'fixed');
$('.additional').css('top', 70);*/
} else {
/*EG:*/ $('#content').css('backgroundColor', '#f0f');
/*$('.additional').css('position', 'relative');
$('.additional').css('top', 0);*/
}
};
$(window).scroll(move);
move();
}
$(function () {
moveScroller();
});
I'm putting together a jQuery plugin. The plugin takes panels, and auto-sizes their height. So I start off with something like this:
<div class="panel">Test 1</div>
<div class="panel">Test 2</div>
<div class="panel">Test 3</div>
The code for that looks something like:
sizePanels: function(){
panels.each(function(){
$(this).height(docHeight);
});
},
There is a down button, that when clicked, will take the user to the next $(".panel):
nextPanel: function(){
$.scrollTo($(".panel:eq(" + panelIndex + ")"), 250, { easing: "swing" });
}
With that, I'm keeping track of the panel index that their on:
if (panelIndex < (panelCount - 1) ) {
panelIndex += 1;
}
I'm trying to figure out a way to track if they happen to scroll manually, and pass one of the elements, to then increase the "panelIndex", so that the button doesn't move them up instead of down because it was never incremented properly due to the user using the scroll bar instead of the button. This is what I have so far:
$(window).scroll(function(){
panels.each(function(index){
if ($(window).scrollTop() > $(this).scrollTop()) {
panelIndex = index;
// console.log(index);
}
});
if (panelIndex < panelCount - 1){
s.showDownButton();
}
});
The code excessively checks and feels somewhat overboard. is there a better way to do it?
An easy optimization is to only calculate the scrollTop once and to exit the each loop when a match is found. You can exit a $.each loop by returning false.
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
panels.each(function(index){
if (scrollTop > $(this).scrollTop()) {
panelIndex = index;
} else {
return false;
}
});
if (panelIndex < panelCount - 1){
s.showDownButton();
}
});
The next way that I would suggest optimizing this is to pre-calculate the scrollTop of each panel on page load (and when the viewport is resized). If you store these values in an array, then you can loop through them very quickly.
Here is some rough code to illustrate the idea:
var panelTops = [];
findPanelTops(); // calculate on load
$(window).on("resize", findPanelTops); // calculate on resize
function findPanelTops() {
panelTops = [];
panels.each(function(index) {
panelTops.push($(this).scrollTop());
});
}
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
for (var i = 0; i < panelTops.length; i++) {
if (scrollTop > panelTops[i]) {
panelIndex = i;
} else {
break;
}
};
if (panelIndex < panelCount - 1){
s.showDownButton();
}
});
The scroll event can fire a lot and very quickly, so you want to keep the amount of computation as minimal as possible. One way to get around all of this is to implement a scrollend handler. This will only fire when the scroll event has appeared to have stopped.
Here is some basic code for doing that. It will fire when the scroll event has stopped for more than 500ms:
var scrollTimeout = null;
function onScroll() {
if (scrollTimeout) {
clearTimeout(scrollTimeout);
}
scrollTimeout = setTimeout(onScrollEnd, 500);
}
function onScrollEnd() {
// Scrolling has stopped
// Do stuff ...
scrollTimeout = null;
}
$(window).on("scroll", onScroll);