多個粘滯元素

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(); 
}