jQuery 'removeClass' not working on sticky nav bar
我正在一个需要粘性导航栏的网站上工作,当用户向下滚动页面时,导航栏应会"弹出"标题。然后,当用户滚动回到顶部时,它应该返回到其在标题内的原始位置。
这里是JSFiddle。
我的问题是,当用户滚动回到页面顶部时,不会删除我的
我考虑过我的'if'语句条件是否是导致问题的原因,但是当找出
1 2 3 4 5 6 7 8 | var stickyHeaderOffsetValue = $('#sticky-container').offset().top; var currentOffsetPosition = $(window).scrollTop(); if (currentOffsetPosition >= stickyHeaderOffsetValue) { $('#sticky-container').addClass('sticky'); } else { $('#sticky_navigation').removeClass(); // this didn't work } |
http://jsfiddle.net/fS3Tr/4/
几件事,首先需要保持标题的" home"位置。一旦修复,将永远无法正确计算。
1 | if (!window.homePosition) window.homePosition = $('#sticky-container').offset().top; |
其次,您从错误的标记中删除了该类:)
1 | $('#sticky-container').removeClass('sticky'); |
您已经关闭。标头未重置,因为在将其分配给粘性类后,它会丢失其顶部偏移量。当您删除粘性类时,我只是重置顶部偏移量。
此外,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | stickyHeaderHandler(); // ON WINDOW SCROLL $(window).scroll(function(){ stickyHeaderHandler(); }); function stickyHeaderHandler() { var stickyHeaderOffsetValue = $('#sticky-container').offset().top; var currentOffsetPosition = $(window).scrollTop(); //console.log(currentOffsetPosition +" +" + stickyHeaderOffsetValue); if (currentOffsetPosition >= stickyHeaderOffsetValue) { $('#sticky-container').addClass('sticky'); } else { // Remove sticky class & Reset the top offset $('#sticky_navigation').removeClass('sticky') .offset({ top:"104px", left: offset.left}) } } |
这是工作中的小提琴。