我正在制作一个粘贴边栏,以便“粘贴”#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
答案 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>
让我知道是否有帮助