我需要一个“页面部分”来固定 (x) 滚动量,然后移动到下一个部分。我已经尝试将它们放入子主题中,但没有...有人可以告诉我一个不重 Javascript 的好方法吗?
CSS
.isSticky {
top: 0;
position: fixed;
}
HTML
<div>
<section id="top"></section>
<section id="test2"></section>
<section id="bottom"></section>
</div>
JS
$(document).ready(function () {
var el = $('#test2');
var elTop = el.position().top;
$(window).scroll(function () {
var windowTop = $(window).scrollTop();
if (windowTop >= elTop) {
el.addClass('isSticky');
} else {
el.removeClass('isSticky');
}
最佳答案
由于目前缺乏支持,这个答案可能不是 100% 实用的,但很快您将能够使用 CSS 的 position: sticky
属性,目前在 Firefox 中支持并在 Safari 中添加前缀/iOS(Caniuse)。
该功能以前在 Chrome 中启用,但后来为了 re-doing it more efficiently 的利益而被删除.
html, body {
margin: 0;
}
body * {
margin: 20px;
padding: 20px;
}
.header {
margin: 0;
padding: 20px;
background: #000;
}
.header span {
display: block;
color: #fff;
margin: 0 auto;
text-align: center;
padding: 0;
}
.placeholder {
border: 1px solid black;
margin: 0 auto;
text-align: center;
height: 300px;
}
.slider {
background: #006264;
color: white;
font-weight: bold;
margin: 0 auto;
position: sticky;
top: 0px;
}
<div class="header"><span>This is a header</span></div>
<div class="placeholder">This div holds place</div>
<div class="slider">This should slide up and then stick.</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
<div class="placeholder">This div holds place</div>
关于javascript - 有一个 DIV 'stick' 用于 x 数量的卷轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27972209/