滚动触发条件中的递归答案

【问题标题】：recursion in scroll triggered conditionals滚动触发条件中的递归
【发布时间】：2019-03-06 18:44:34
【问题描述】：

当我使用下面的代码时，当我滚动侧边栏时会来回闪烁。测试发现这是因为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');
  }
 });

【问题讨论】：

标签： jquery scrolltop

【解决方案1】：

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

【讨论】：