如何使用js固定和取消固定元素

Question

因此，基本上，我正在處理的頁面上有一個側面導航，並且我嘗試將其固定在滾動軸上，並在到達某個點時取消固定。 現在，這個問題的目的不僅僅是獲得直接答案，我還想對為什么我的代碼無法正常工作進行一些解釋。

當我將其固定到頁面時，代碼都很好，但是當它到達頁腳部分時，我希望它取消固定，這讓我有些頭疼。

我嘗試了這個：

HTML

<div class="header"></div>
<div class="side-nav"></div>
<div>Rest of page content</div>
<div class="footer"></div>

JS

  function pinElement() {
     var products = document.querySelector('.rest-of-page'),
       scroll = window.scrollY,
       nav = document.querySelector('.side-nav'),
       navTop = nav.offsetTop
       header = document.querySelector('.header'),
       offset = header.clientHeight,
       end = products.clientHeight + products.offsetTop; 


       if (scroll >= navTop) {
            nav.style.position = 'fixed';
            nav.style.top = offset;
        } else if (scroll < navTop) {
            nav.style.position = 'relative';
        } else {
            if(scroll >= end){
               nav.style.position = 'relative';
            }
        }
  }        
       document.addEventListener('scroll', pinElement)

現在，我遇到的問題在到達“ end”變量時不會取消固定，而是滾動經過它並取消固定在底部附近。 我想了解為什么會發生這種情況，並找到解決此問題的正確方法。 謝謝

Answer 1

問題不是您的條件沒有達到if(scroll >= end)因為即使scroll >= navTop ，這也將成立。

如果nav.style.top在end之下，應該是什么？ 原始條件始終將其設置為offset 。

設置nav.style.top = offset; 到頂部end當用戶滾動過去的end ，否則你設置nav.style.top來offset 。

if (scroll >= navTop  && !(scroll >= end)) {
        nav.style.position = 'fixed';
        nav.style.top = offset;
    } else if (scroll < navTop) {
        nav.style.position = 'relative';
        //You may wish to set nav.style.top here too since it's ambiguous otherwise
}
if(scroll >= end){
           nav.style.position = 'relative';
           nav.style.top = end.style.top; //or where ever you want it to be
        }
    }

Answer 2

在您的if / else語句中，永遠不會達到最后一個條件。 我已經修改了您的代碼，以使您的上一個條件可以實現。

function pinElement() {
     var products = document.querySelector('.rest-of-page'),
       scroll = window.scrollY,
       nav = document.querySelector('.side-nav'),
       navTop = nav.offsetTop
       header = document.querySelector('.header'),
       offset = header.clientHeight,
       end = products.clientHeight + products.offsetTop; 


       if (scroll >= navTop && scroll < end) {
            nav.style.position = 'fixed';
            nav.style.top = offset;
        } else if (scroll < navTop) {
            nav.style.position = 'relative';
        } else {
            if(scroll >= end){
               nav.style.position = 'relative';
            }
        }
  }        
  document.addEventListener('scroll', pinElement)