Question

如何编写代码（下面）那个无限（#stickyContainer）元素的数量也能用来代码？现在，一个元素正在运作。

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代码之前，如果我是你，我会调查css位置：粘性和不支持它的broswers的粘性polyfill。在这种情况下，它会让您的生活变得更轻松，因为它会照顾您的容器的宽度，您只需要将位置设置为粘性，并且距离窗口顶部有多远，您希望它开始粘贴。在未来，这很可能成为网页设计的中流砥柱。关于这一点的另一个好处是，在移动屏幕中，您可以轻松地将您的元素更改为堆栈，而不是仅仅使用CSS而不是冗长的javascript编码。你可以在这里阅读更多相关信息https://www.sitepoint.com/css-position-sticky-introduction-polyfills/。所以使用sticky你只需要将你的css设置为这样的元素。

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

然后，不支持css粘贴的浏览器的polyfill可以在https://github.com/wilddeer/stickyfill下载到此处。您只需包含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，因为我无法理解你的小提琴中的代码，也就像评论中所述，你应该只在每个页面上有一个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 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();
}

多个粘性元素

1 个答案: