javascript - 粘性元素捕捉向下滚动和捕捉向上滚动

Question

我有一个粘性侧边栏，现在使用 js 我让它捕捉并固定在某个点。但是当我向上滚动时，我需要它捕捉而不是比它的起点更远。 到目前为止，这是我的代码。

$(window).scroll(function(e){ 
  $el = $('.why_social'); 
 if ($(this).scrollTop() > 735 && $el.css('position') != 'fixed'){ 
  $('.why_social').css({'position': 'fixed', 'top': '-62px'}); 
  } 
});

Answer 1

您只需要添加一个相反的支票。这应该可以帮助您入门。

$(window).scroll(function(e){ 
    $el = $('.why_social'); 
    if ($(this).scrollTop() > 735 && $el.css('position') !== 'fixed') { 
        $('.why_social').css({'position': 'fixed', 'top': '-62px'}); 
    }
    if ($(this).scrollTop() <= 735 && $el.css('position') === 'fixed') {  {
        $('.why_social').css({'position': ''}); // remove `position: fixed;`
    }
});

顺便说一句:如果您还没有决定采用自定义解决方案，您可以查看 Bootstrap's Affix Plugin满足您的需求。您可以在 https://github.com/twbs/bootstrap/blob/master/js/affix.js 获取源代码。另一个链接会将您带到有关如何使用它的文档。您所要做的就是添加 .affix { position: fixed; 到你的 CSS。