Question

我有一个列，我想要坚持到页面的顶部，但是一旦它到达粘滞点，任何进一步的滚动导致它在添加的类之间来回跳转。

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  var div_top = $('#stick-me').offset().top;
  if (window_top >= div_top) {
    $('#stick-me').addClass('stick');
  } else {
    $('#stick-me').removeClass('stick');
  }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

我的直觉告诉我这是条件陈述的问题，但我不确定我还能如何构建它。提前谢谢！

Answer 1

您不需要添加/删除类，只需切换类即可。如果没有看到你的CSS和其他JS冲突，我所能做的就是向你展示一个有效的例子。

DEMO http://jsfiddle.net/tbdbyxvu/

var $window = $(window),
       $stickyEl = $('#the-sticky-div'),
       elTop = $stickyEl.offset().top;

   $window.scroll(function() {
        $stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
    });

Answer 2

当你的类'stick'被应用时，#stick-me元素会被移动（正如你想要的那样）。

当你的函数第二次运行时，div_top现在是一个新的（更大的）数字，你的if语句（第一次证明是真的）现在证明是错误的并且删除了这个类。

简而言之，您的课程一次又一次地被添加和删除。

我建议将#pick-me的原始位置存储在sticky_relocate之外的变量startingPoint中，然后在scrollTop大于startingPoint时添加/删除该类。

function sticky_relocate() {
  var window_top = $(window).scrollTop();
  if (window_top >= startingPoint) {
    $('#stick-me').addClass('stick');
  } else {
    $('#stick-me').removeClass('stick');
  }
}

$(function () {
    var startingPoint = $('#stick-me').offset().top;
    $(window).scroll(sticky_relocate);
});

jQuery滚动事件在if / else之间来回切换

2 个答案: