javascript - 多个粘性元素

Question

如何编写代码(如下)，使无限(#stickyContainer)数量的元素也能运行该代码？现在，有一个元素正在工作。

https://jsfiddle.net

function $(id) {
    return document.getElementById(id);
}

function sticky() {
    var stickyBoxHeight = $('stickyBox').offsetHeight;

    var stickyTop = $('stickyBox').getBoundingClientRect();
    var stickyBoxTop = stickyTop.top;

    var stickyBoxBottom = stickyBoxTop + stickyBoxHeight;

    var stickyHeight = $('sticky').offsetHeight;

    if (stickyBoxTop <= 0) {
        $('sticky').className = 'fixed';
    } else if (stickyBoxBottom >= stickyBoxHeight) {
        $('sticky').className = '';
    }

    if (stickyBoxBottom <= stickyHeight) {
        $('sticky').className = 'fixedBottom';
    }
}

window.onscroll = function () {
    sticky();
}

Answer 1

所以在我进入 javascript 和 html 代码之前的第一件事是，如果我是你，我会研究 cssposition:sticky 和不支持它的浏览器的粘性填充。在这种情况下，它将使您的生活变得更加轻松，因为它会处理容器的宽度，您只需将位置设置为粘性以及您希望它开始粘在距离窗口顶部多远的地方。 future ，这很可能成为网页设计的支柱。另一个好处是，在移动屏幕中，您可以轻松更改要堆叠的元素，而不是仅仅使用 css 而不是冗长的 javascript 编码。您可以在这里阅读更多相关信息https://www.sitepoint.com/css-position-sticky-introduction-polyfills/ 。因此，使用粘性，您只需将 css 设置为元素，如下所示。

.sticky-box{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

对于不支持 css Sticky 的浏览器，可以在 https://github.com/wilddeer/stickyfill 下载 Polyfill。您只需包含 polyfill 的路径并使用 javascript 启动，如下所示:

<script src="path/to/stickyfill.min.js"></script>

var stickyElements = document.getElementsByClassName('sticky-box');
for (var i = stickyElements.length - 1; i >= 0; i--) {
    Stickyfill.add(stickyElements[i]);
}

我已经做了一个实际演示。注意:我不得不重写 html 和 css，因为我很难理解你的 fiddle 中的代码，也像评论中所述，你应该在每个页面上只拥有某个 id 之一。 Id 对于每页的一个元素应该是唯一的。所以你会想使用类来代替。

这是CSS位置粘性演示Fiddle Demo

现在我们将讨论 javascript 方式以及如何为此编写代码。首先，就像我说的，你会想要使用类名而不是 id，因为你将拥有多个类名。因此，对于标记，您需要一个粘性容器，然后在其内部有一个粘性框。然后，您将把容器定位为相对位置，然后在添加类时，我们将相应地定位粘性框。现在我们要做的是在 javascript 中为每个粘性容器运行一个 for 循环并向它们添加类，因为这将是最简单的。因此，每次粘性容器之一到达顶部时，我们都会添加固定到容器的类，而不是粘性盒本身。然后在你的 CSS 中，你可以使用这个父级将位置添加到粘性框，如下所示:

  <div class="sticky-container">
    <div class="sticky-box">
      Sticky Box
    </div>
  </div>

.fixed .sticky-box{
  position:fixed;
  top:0;
  right:0;
}
.fixedBottom .sticky-box{
  position:absolute;
  top:auto;
  bottom:0;
}

唯一应该放在粘性容器中的是粘性框，因此将信息 div 放在粘性容器之外。然后，您需要创建一个 javascript 函数来为该框添加宽度，因为当它被固定时，它将需要与它所在的容器具有相同的宽度。对于下面的示例，因为您已经指定了粘性框的高度并且我只是使用数字而不是计算容器高度来添加fixedBottom类，但是如果您的盒子和容器将是动态高度，您将不得不编写一些代码来计算何时应添加fixedBottom类。无论如何，我知道这是一个很长的答案，但有很多关于代码的解释，所以这是我在示例中使用的内容。看一下它，看看它是如何工作的。

这是一个实际的 fiddle 演示 Fiddle Demo

以及新的 JavaScript 代码

var stickyContainers = document.getElementsByClassName("sticky-container");
function sticky(){
  for(var i = 0; i < stickyContainers.length; i++){
    var stickyContainer = stickyContainers[i];
    if (window.pageYOffset >= stickyContainer.offsetTop){
      stickyContainer.classList.add("fixed");
    }else{
      stickyContainer.classList.remove("fixed");
    }
    if (window.pageYOffset >= stickyContainer.offsetTop + 350){
      stickyContainer.classList.add("fixedBottom");
    }else{
      stickyContainer.classList.remove("fixedBottom");
    }
  }
}
window.onscroll = function() {
  sticky();
}