jquery - 粘性侧边栏从位置切换

Question

我正在制作一个粘性侧边栏，当用户滚动它时，它会“粘”到页面顶部。但是，侧边栏无法正常工作，它会随着用户滚动而在静态和固定定位之间来回切换。

$(document).scroll(function () {
        var docScroll = $(this).scrollTop();
        var stickyListOffset = $(".sticky-list").offset().top;
        if(docScroll > stickyListOffset){ 
          $(".sticky-list").css({
             'position' : 'fixed',
             'top' : '0px',
             'width' : '100%'
          }); 
        } else {
          $(".sticky-list").css({
             'position' : 'static'
          })
        }
    }); 

CSS:

.sticky-list {
    background:#7C9ED9;
    padding:1em;
    list-style:none;
    font-family:Domine, serif;
}
.sticky-list #indicator {
    font-size:.8em;
    color:#fff;
    font-style:italic;
    font-family:Bitter, serif;
}
.sticky-list #indicator:after {
    width:100%;
    content:"";
    display:block;
    background:#fff;
    height:2px;
}

HTML:

<ul id="jump-list" class="sticky-list">
    <span id="indicator">Jump To...</span>
    <li><a href="#open-console">Opening the Console</a></li>
    <li><a href="#writing-to-console">Writing to the Console</a></li>
</ul> 

但是，跳转条在静态和固定定位之间闪烁，而不是应有的样子。为什么这不起作用？
Page

Answer 1

当您将位置设置为固定时，粘性列表的 offset().top 更改为 $(this).scrollTop + 10，因为"top: 10" 粘性列表的样式。改变

if(docScroll > stickyListOffset){ 

到

if(docScroll + 10 >= stickyListOffset){ 

它应该可以工作