滚动触发条件中的递归

Question

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

想法是页面上有一个侧边栏，它会一直滚动直到到达页脚，然后它绝对定位到其容器的底部，直到向上滚动。

除滚轮每隔 "click" 个条件失败，导致侧边栏剧烈闪烁外，它一切正常。

这是一个活生生的例子：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 被设置为我试图浮动的侧边栏的顶部偏移量，所以它变得疯狂了。为了稳定，我打算将其设置为左侧内容块的顶部偏移量。

滚动触发条件中的递归

recursion in scroll triggered conditionals

jquery

scrolltop