jQuery位置DIV固定在滚动上

时间:2015-03-04 00:49:58

标签: javascript jquery html css

当用户向下滚动此元素触摸窗口顶部时,我尝试将元素固定在顶部。 向下滚动一切都有效(添加了一个具有固定位置的类),但是当我向上滚动时不起作用。 但我不明白为什么:( 我用这段代码创建了一个jsfiddle:http://jsfiddle.net/8h4knr9r/

$(window).scroll(function () {
     var distance = $('#navigation-sections').offset().top;

     if ($(window).scrollTop() >= $('#navigation-sections').offset().top) {
         $('#navigation-sections').addClass("affix");

     } else {
         $('#navigation-sections').removeClass("affix");
     }
 });

感谢

1 个答案:

答案 0 :(得分:3)

您需要将初始距离存储在滚动功能之外 - 否则它 将重新计算每个卷轴。这是工作小提琴:http://jsfiddle.net/donal/8h4knr9r/5/

JS应该是这样的:

var distance = $('#navigation-sections').offset().top; 

$(window).scroll(function () {

     if ($(window).scrollTop() >= distance) {
         $('#navigation-sections').addClass("affix");

     } else {
         $('#navigation-sections').removeClass("affix");
     }
 });