多个粘滞元素

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代码，所以第一件事情是，如果我是你，我会去了解一下CSS的位置是：粘和不支持它broswers粘性填充工具。在这种情况下，它会让你的生活变得更轻松，因为它会照顾到你的容器的宽度，并且你只需要将位置设置为粘性，并且距离窗口顶端距离你想要的位置有多远。在未来，这将很可能成为网页设计的中流砥柱。关于这一点的另一个好处是，在手机屏幕上，您可以轻松地将您的元素更改为堆栈，而不是仅使用CSS，而不使用冗长的JavaScript编码。你可以在这里阅读更多关于https://www.sitepoint.com/css-position-sticky-introduction-polyfills/。所以用粘性，你只需要像你这样设置你的CSS。

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

然后在填充工具对于并不像现在这样支持CSS可以粘在这里https://github.com/wilddeer/stickyfill下载而你仅仅只包含路径填充工具，并启动与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(); 
}