粘性侧边栏从位置切换

时间:2015-11-03 19:50:24

标签: jquery html css

我正在制作一个粘贴边栏,以便“粘贴”#39;当用户滚过它时到页面顶部。但是,侧边栏不能正常工作,它会在用户滚动时在静态和固定定位之间来回切换。

$(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

2 个答案:

答案 0 :(得分:0)

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

if(docScroll > stickyListOffset){ 

if(docScroll + 10 >= stickyListOffset){ 

它应该有效

答案 1 :(得分:0)

滚动时.offset().top值正在变化。这就是它闪烁的原因。您需要在.offset().top

之前计算scroll function

我建议你不要在jQuery中使用css,因为它增加了内联css,这并不是一件好事。而是在粘贴时添加一个类,并在css中设置该类。这将是“最干净”的方式。

还要计算.outherHeight() + .offset().top,如果您希望列表在过了它之后变得粘滞。

.outherHeight()因为ul有一个padding:1em而只使用.height()没有考虑填充。

我计算列表应该是粘滞的,一些变量要更清楚

请参阅代码段

 var stickyHeight = $(".sticky-list").outerHeight(),
     stickyListOffset = $(".sticky-list").offset().top,
     whenToSticky = stickyHeight + stickyListOffset
$(document).scroll(function () {
        var docScroll = $(this).scrollTop();
       
        if(docScroll > whenToSticky ){ 
          $(".sticky-list").addClass("sticky")
        } else {
          $(".sticky-list").removeClass("sticky")
        }
    }); 
.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;
}
.content {
  height:800px;
  background:red;
}

.sticky-list.sticky {
  position: fixed;
  top : 0px;
  width : 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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> 
<div class="content">

</div>

让我知道是否有帮助