鎖定在滾動上的元素純JavaScript否Jquery

我試圖將綠色框鎖定在用戶滾動瀏覽內容的最頂端。但是，當您滾動時，在綠色框的頂部有間隙（如演示中所示）鎖定在滾動上的元素純JavaScript否Jquery

我試圖將位置設置爲綠色框固定，但它跳出紅色框。所以它需要保持絕對。

請看例子中，我將它設置在這裏住http://jsfiddle.net/jpXjH/839/

還是看看這裏的代碼

<div style="padding: 20px 0px; background-color:cyan;"> 
    This is a header with some random content 
</div> 

    <div style="width:480px; height:1400px; overflow:hidden; margin:auto; 
    border:1px solid gray; position:relative; background-color: #ff5d5d; "> 

     <div id="locked"> 
     This element needs to be on the very top LOCKED when scrolled down. 
     However you can see there is a gap in the very top when you scroll. 
     </div> 

</div> 

<style> 
#locked{ 
    background-color: limegreen; 
    padding:10px; 
    width:150px; 
    position:absolute; 
    top:0; 
    right:0; 
} 
</style> 
<script> 
    window.onscroll = changePos; 

      function changePos() { 
       var locked = document.getElementById("locked"); 

       if (window.pageYOffset > 30) { 
        locked.style.position = "absolute"; 
     locked.style.float = "right"; 
        locked.style.top = pageYOffset + "px" 
       } else { 
        locked.style.position = ""; 
        locked.style.top = ""; 
       } 
      } 
<script>

在此先感謝

來源

2017-07-20 mark

這是你想要實現的嗎？不知道我是否理解你的問題http://jsfiddle.net/jpXjH/843/ – wiesion

這正是它謝謝:) – mark

我能想到的

簡單的方法是從你的JS中改變的header.style.top中減去頂部鎖定欄的高度：

header.style.top = pageYOffset - 76 + "px"

顯然，您可以直接從元素中獲取高度，而不是對其進行硬編碼。

來源

2017-07-20 14:51:52 Forkerino

輝煌，非常簡單和乾淨 – mark

您的身體或html標記可能有一些填充/邊距。檢查它是否存在，然後通過減去window.pageYOffset global中的數量來解決此問題。

您還需要考慮紅色div之前的任何元素的高度。

來源

2017-07-20 14:54:04 groooves

你爲什麼不嘗試使用位置固定的，如：

#header{ 
    background-color: limegreen; 
    padding:10px; 
    width:150px; 
    position:fixed; 
    top:0; 
    right:0; 
} 

    window.onscroll = changePos; 

       function changePos() { 
        var header = document.getElementById("header"); 

        if (window.pageYOffset > 30) { 
         //header.style.position = "absolute"; 
      header.style.float = "right"; 
         //header.style.top = pageYOffset + "px" 
        } else { 
         header.style.position = ""; 
         header.style.top = ""; 
        } 
       }

如果你並與紅色容器可以用JS計算對齊。

來源

2017-07-20 14:54:28

感謝您的迴應，但綠色框需要在重做。因此無法使用固定的 – mark

是的，但我告訴你，使用jquery或者你喜歡計算紅色和綠色方框的邊距是否相同。很簡單，對吧？ –

鎖定在滾動上的元素純JavaScript否Jquery

回答

相關問題