滚动触发条件中的递归

Question

当我使用下面的代码时，当我滚动侧边栏时来回闪烁。测试发现这是因为winTop >= (contentTop - header.height())条件在每次其他滚动迭代时失败。

这个想法是页面上有一个侧边栏，它一直滚动直到它撞到页脚，然后它完全定位到其容器的底部，直到向上滚动。

它可以正确地完成所有操作，除了条件每次滚动“点击”滚动失败，导致侧边栏猛烈闪烁。

这是一个实例：http://www-icoachfirst-com.sandbox.hs-sites.com/test-lptest-lp

jQuery的：

var $window = $(window),
    header = $('.header'),
    sidebar = $('#sidebar'),
    content = $('#content'),
    container = $('.floattrap'),
    footer = $('.footer_main');

$(window).on('load scroll resize', function(){
    var contentTop = sidebar.offset().top,
        winTop = $(window).scrollTop(),
      footerTop = footer.offset().top;

console.log(winTop);
    if (winTop >= (contentTop - header.height())) {

    if (footerTop <= (winTop + $window.height())) {
      sidebar.removeClass('stuck');
      sidebar.addClass('bot');
      console.log(true);
    } else {
      sidebar.removeClass('bot');
      sidebar.addClass('stuck');

      $('.stuck').css({
        'top': (header.outerHeight(true) + 20),
        'left': (content.offset().left + content.width()),
        'right': (container.offset().left + container.width())
      });

      console.log(false);

    }
  } else {
    console.log('fail');
    sidebar.removeClass('stuck');
    sidebar.removeClass('bot');
  }
 });

Answer 1

我有一个变量错了。 contentTop被设置为我试图漂浮的侧边栏的顶部偏移，所以它变得疯狂。我的意思是将其设置为左侧内容块的顶部偏移以确保稳定性。