I have a scroll function set up so when the window scrolls beyond 50px, the .header-wrap
div animates from a height of 140px
to 70px
, ideally what should happen then is when you scroll back less than 50px from the top, the .header-wrap
div should animate back from 70px
to 140px
but this function doesn't seem to be working as it should:
jsFiddle: /
HTML:
<div class="header-wrap">hello</div>
<div class="scroll"></div>
CSS:
.header-wrap {
position: fixed;
width: 100%;
height: 140px;
top: 0;
left: 0;
text-align: center;
background-color: #999;
z-index: 9999;
}
.scroll {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4000px;
}
jQuery:
$(document).scroll(function () {
if (window.scrollY > 50) {
$(".header-wrap").animate({
height: "70px"
}, 500);
} else {
$(".header-wrap").animate({
height: "140px"
}, 500);
}
});
This function doesn't seem to be working as I've described above, and not animating the height of the div dependant on how far the window has scrolled. Any suggestions are greatly appreciated!
I have a scroll function set up so when the window scrolls beyond 50px, the .header-wrap
div animates from a height of 140px
to 70px
, ideally what should happen then is when you scroll back less than 50px from the top, the .header-wrap
div should animate back from 70px
to 140px
but this function doesn't seem to be working as it should:
jsFiddle: http://jsfiddle/ub8Rb/
HTML:
<div class="header-wrap">hello</div>
<div class="scroll"></div>
CSS:
.header-wrap {
position: fixed;
width: 100%;
height: 140px;
top: 0;
left: 0;
text-align: center;
background-color: #999;
z-index: 9999;
}
.scroll {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4000px;
}
jQuery:
$(document).scroll(function () {
if (window.scrollY > 50) {
$(".header-wrap").animate({
height: "70px"
}, 500);
} else {
$(".header-wrap").animate({
height: "140px"
}, 500);
}
});
This function doesn't seem to be working as I've described above, and not animating the height of the div dependant on how far the window has scrolled. Any suggestions are greatly appreciated!
Share Improve this question asked Oct 26, 2013 at 1:14 user1374796user1374796 1,58213 gold badges46 silver badges76 bronze badges4 Answers
Reset to default 3This one is smooth...
var go = true;
$(window).scroll(function() {
if ($(this).scrollTop() > 50 && go) {
$(".header-wrap").stop().animate({height:'70px'}, 500);
go = false;
} else if ($(this).scrollTop() < 50 && !go) {
$(".header-wrap").stop().animate({height:'140px'}, 200);
go = true;
}
});
made a fiddle: http://jsfiddle/filever10/z5D4E/
This may be a problem of conflicting animations, because if you scroll slowly your example works. Setting a trigger to determine when/if to play the height animation should correct the conflict. Here is an example of this working:
http://jsfiddle/ub8Rb/18/
var sizeTrigger = 'tall';
$(document).scroll(function () {
console.log(window.scrollY);
if (window.scrollY > 50 && sizeTrigger == 'tall') {
$(".header-wrap").animate({
height: "70px"
}, 500, function() {
sizeTrigger = 'small';
console.log(sizeTrigger);
});
} else if (window.scrollY < 50 && sizeTrigger == 'small') {
$(".header-wrap").animate({
height: "140px"
}, 500, function() {
sizeTrigger = 'tall';
console.log(sizeTrigger);
});
}
});
Add a stop()
to your code, $(".header-wrap").stop().animate
, this stops any currently executing animations. Here is a JSFiddle with the modified code: >>>CLICK HERE<<<
What happens is your scroll function will fire rapidly, trying to execute the animate()
function, which will add them queued into your browser's memory. If you wait long enough, the queue will reach the end and your animation works as expected.
Easy solution, add stop(true, false)
in front of animate()
API: http://api.jquery./stop/
You could use a wrapper function to capture duplicated events if you want to control the delay.
var headerwrap = $(".header-wrap"),
delayedEvent = (function () {
var timers = {};
return function (callback, delay, id) {
delay = delay || 500;
id = id || "duplicated event";
if (timers[id]) {
clearTimeout(timers[id]);
}
timers[id] = setTimeout(callback, delay);
};
})();
$(document).scroll(function (ev) {
delayedEvent(function () {
var h = (window.scrollY > 50) ? 70 : 140;
headerwrap.stop(true, false).animate({ height: h }, 500);
}, 500, "scroll event");
});
FIDDLE: http://jsfiddle/tive/QskJm/