我正在使用 bootstrap 制作一个博客页面。页面右侧的三分之一是一列,其中包含类别列表和搜索栏,当您从页面顶部滚动 300 像素时,搜索栏会固定。这似乎运行良好,但问题是当页面首次加载时,side 元素无缘无故地跳到页面顶部。我假设我的 JS 代码有问题。
$(window).scroll(function() {
var scroll = $(window).scrollTop();
var objectSelect = $("#wrapnews");
var objectPosition = objectSelect.offset().top;
if (scroll > 300) {
$(".col-md-4").addClass("fix-sidebar");
} else {
$(".col-md-4").removeClass("fix-sidebar");
}
});
这是供进一步引用的 CSS
.fix-sidebar {
position: fixed !important;
top: 180px;
right: 30px;
width: 360px;
}
.sidenote {
text-align: center;
display: block;
background-color: #ccc;
color: #fff;
border: 2px solid #000;
border-radius: 2px;
width: 360px;
}
HTML div 的嵌套
<div class="col-md-4 fix-sidebar" id="wrapnews">
<div class="sidenote">
</div>
</div>
最佳答案
AS col-md-4
是 float 的,所以你不应该让它固定位置。
并且因为您将 position:fixed
添加到 .fix-sidebar
,所以您应该删除 right: 30px;
。
var objectSelect = $("#wrapnews"), objectPosition = objectSelect.offset().top;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll > objectPosition) {
objectSelect.addClass("fix-sidebar");
} else {
objectSelect.removeClass("fix-sidebar");
}
});
@import url('//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css');
body {
height: 2000px;
}
.wrapnews {
position: relative;
top: 180px;
}
.fix-sidebar {
position: fixed !important;
top: 0;
}
.sidenote {
text-align: center;
display: block;
background-color: #ccc;
color: #fff;
border: 2px solid #000;
border-radius: 2px;
width: 360px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-8" style="background: red;height: 1000px">
content
</div>
<div class="col-md-4">
<div class="wrapnews" id="wrapnews">
<div class="sidenote">sidenote
</div>
</div>
</div>
</div>
可以看在线演示HERE
关于jquery - 固定滚动位置的元素在页面加载时跳出位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38586900/