I'm using $(window).scroll to animate the top header of my site when scrolling away from the very top of the viewport. The initial condition works fine, with all my animate() effects working. The problem is that when I scroll back to the top of the page, the header doesn't animate back to the original settings (a few times it has, but after a long pause).
jsfiddle: http://jsfiddle.net/3ocbkkyk/
jQuery:
var $headerBar = $(".header"),
$window = $(window),
offset = $headerBar.offset(),
topPadding = 0;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
//$headerBar.stop().animate({
//marginTop: $window.scrollTop() - offset.top + topPadding
//});
console.log('Left the Top');
// Add class 'fixed'
$headerBar.addClass('moved');
$('p.mainprinav_text').animate({ padding: '20px 45px 20px 0' });
$('ul.mainprinavlist li a').animate({ padding: '20px 35px' });
$('div.headerlogo').animate({ top: '6px' });
$('div.headerlogo img').animate({ width: '90px' });
$('body.site').animate({ paddingTop: '38px' });
} else if ($window.scrollTop() <= offset.top) {
//$headerBar.stop().animate({
//marginTop: 0
//});
console.log('Back to Top');
// Remove class 'fixed'
$headerBar.removeClass('fixed');
$('p.mainprinav_text').animate({ padding: '39px 45px 39px 0' });
$('ul.mainprinavlist li a').animate({ padding: '39px 35px' });
$('div.headerlogo').animate({ top: '13px' });
$('div.headerlogo img').animate({ width: '120px' });
$('body.site').animate({ paddingTop: '0' });
}
});
The Problem
is that there is nothing to prevent buildup.
if you add .stop() before each animate(...) then it will prevent the queue buildup you're experiencing that causes the delay in animations.
Like in this fiddle...
Though there are also other things that can make this better as well. You should have a switch so each part of the script only fires once, the animations can be replaced with css so you could just toggle a class, and the whole thing can be done with much less code.
If you're interested in these other changes I can make another fiddle to illustrate.
Related
I've begun experimenting with javascript/jquery and have hit my first snag. Everything works but that. I have a nav bar that fixes to the top of the page when you scroll down to it and it has a hidden image in it. I'm trying to make it visible and fade in when the nav bar hits the top and fade out when you scroll back up. I've tried using several solutions but nothing seems to work. I'm pretty sure the problem is me failing at writing this so can anyone shine some light?
CSS:
#navimg {
padding: 0px 0px 0px 0px;
margin: 0px;
height: 45px;
visibility: hidden;
}
Javascript:
$(function() {
var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_navigation_offset_top) {
$('#sticky_navigation').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#sticky_navigation').css({ 'position': 'relative' });
}
};
sticky_navigation();
$(window).scroll(function() { //
sticky_navigation();
});
});
$(window).scroll(function(){
if($(window).scrollTop()<200){
$('#navimg').css({ 'visibility': 'visible' });
} else {
$('#navimg').css({ 'visibility': 'hidden' });
}
});
What I do when scroll down (navbar fixed top), I switch css class :
$(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
I had this working with no problems for the entire build of the site. Then, the day I was supposed to launch, the sticky menu stopped working right. The menu is supposed to start at the bottom, scroll to the top, then stick (position: fixed).
Now, it scrolls about 10px and then jumps to the top. Why is the scrollTop distance not calculating correctly?
Live site at [site no longer exists]
Here's the code for the sticky menu. I'm also using JS to set min-height of divs to window height, but haven't included that code here.
$(function(){
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {
$('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'});
$('#block-bcf53bf14093931c').css({display: 'block'});
} else {
$('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'});
$('#block-bcf53bf14093931c').css({display: 'none'});
}
});
});
Thanks in advance for any help! I'm not a JS or jQuery expert yet, so any suggestions for cleaning things up would be appreciated.
NOTE: The site is built on WordPress, so no-conflict mode is in effect.
I think you are initialising the sticky menu function before you set the min-height of $('big-div').
On page load, the menu starts at 54px from the top, and so when you store the offset().top value as stickyRibbonTop, it is stored at 54px. Then on your scroll event you are comparing against this.
Try setting the min-height of the divs first in your code, then run this same script afterwards. The value of stickyRibbonTop should then be correct.
Bear in mind that you will need to reset stickyRibbonTop every time the window.height() is updated, so you should probably make this sticky menu function a named function and call it at the end of the wrapper_height function. something like this:
function stickyNav() {
var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top;
$(window).unbind('scroll', scrollEvent);
$(window).on('scroll', stickyRibbonTop, scrollEvent);
};
function scrollEvent(event) {
var stickyRibbonTop = event.data;
if ($(window).scrollTop() > stickyRibbonTop) {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' });
$('#block-bcf53bf14093931c').css({ display: 'block' });
}
else {
$('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' });
$('#block-bcf53bf14093931c').css({ display: 'none' });
}
};
function wrapper_height() {
var height = $(window).height();
var wrapperheight = height - 75;
wrapperheight = parseInt(wrapperheight) + 'px';
$(".bigDiv").css('min-height', wrapperheight);
$("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight);
stickyNav();
}
$(function () {
wrapper_height();
$(window).bind('resize', wrapper_height);
});
So i got this div animate out of the page perfectly but whenever i scroll back up it's still out of the page i tried an if/else statement but it doesn't come back, anyone could help me with this?
Thanks in advance!
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 300){
$('.offer').stop().animate({ top: '+= 10' }, 10, "linear");
}
else if ($(window).scrollTop() < 300){
$('.offer').stop().animate({ top: '-=10' }, 10, "linear");
}
});
});
Try this following code
$(document).ready(function(){
//Keep track of last scroll
var lastScroll = 0;
$(window).scroll(function(){
var st = $(window).scrollTop();
if (st > lastScroll){
$('.offer').stop(true).animate({ top: '+= 100px' }, 10, "linear");
}
else{
$('.offer').stop().animate({ top: '-=100px' }, 10, "linear");
}
//Updates scroll position
lastScroll = st;
});
});
Hope it helps!
The problem is that you are adding or removing 10 from the position every single time a scroll event is fired.
What you should do instead is have a flag, such as isFurtherThan300, which keeps track of whether the position is before or after your cutoff.
Then, perform the animation only if isFurtherThan300 changes.
I have a nav bar and a side bar that is displayed on the bottom on my page when its loaded. But as you scroll down it should add certain css to change the position of them. But seems this is not working only in IE. Can anyone tell me how to fix this in IE?
This is my code:
// SCRIPT FOR STICKY SIDEBAR AND NAV
$(function() {
var stickyRibbonTop = $('#second').offset().top;
$(window).scroll(function(){
if( $(window).scrollTop() > stickyRibbonTop ) {//background: rgba(999,999,999,0.7);height: 80px;width: 100%80
$('#stickyribbon').css({position: 'fixed', top: '0px',maxHeight:'50px',width:'100%',zIndex: '123'});
$('#sidebar').css({position: 'fixed', bottom: '26%',zIndex: '13'});
} else {
$('#stickyribbon').css({position: 'static', top: '0px'});
$('#sidebar').css({position: 'absolute', bottom: '-75%'});
}
});
});
UPDATE:
as I see now, when I log the value of $(window).scrollTop() its always 0 - zero
Try $(document).scroll instead
I am using a scrolling sidebar function in jQuery and would like to add an animation to the transition. How do I edit my code to apply an animation to smooth the transition when scrolling up and down on the page?
Here is my FIDDLE
Here is my js:
$(function() {
var $blah = $("#blah"),
$window = $(window),
offset = $blah.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$blah.css('top','120px');
} else {
$blah.css('top','440px');
}
});
});
Here is my CSS:
#blah {
display:none;
top: 320px;
right: 30px;
position: fixed;
margin: 0 20px 0 20px;
padding: 0px !important;
}
Try using .stop().animate(). The reason why I recommend using .stop() before .animate() is to prevent the effects from chaining excessively. Basically you're going to instruct the browser to "drop what you're doing now when I scroll" and then "start animation".
$(function () {
var $blah = $("#blah"),
$window = $(window),
offset = $blah.offset();
$window.scroll(function () {
if ($window.scrollTop() > offset.top) {
$blah.stop().animate({
top: 50
});
} else {
$blah.stop().animate({
top: 100
});
}
});
});
See fiddle here - http://jsfiddle.net/4VbDN/6/
[Edit]: You can even adjust the duration of the animation as well as assign a callback function even .animation() is triggered. For more instructions, check the jQuery API for .animate() :)