javascript - 有一个 DIV 'stick' 用于 x 数量的卷轴

Question

我需要一个“页面部分”来固定 (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');
    }

Answer 1

由于目前缺乏支持，这个答案可能不是 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>