如何使用js對一個元素進行固定和取消固定

因此，基本上我在我正在處理的一個頁面上有一個側面導航欄，我試圖將其固定在滾動上並在達到某個點時取消固定。現在這個問題的目的不僅僅是得到直接的答案，我還想解釋一下爲什麼我的代碼不工作。如何使用js對一個元素進行固定和取消固定

當我將它固定到頁面上時，代碼是很好的，但我希望它在到達頁腳部分時解除固定，這就是我頭痛的地方。

我嘗試這樣做：

HTML

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

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)

現在我在當它到達「結束」不取消固定問題變量，而不是它滾動通過它並在底部附近的某處處於空閒狀態。我想了解爲什麼會發生這種情況，並找到解決這個問題的適當方法。謝謝

來源

2017-05-28 HackAfro

「pin」是什麼意思？ –

使一個元素的位置固定在頁面上 – HackAfro

@HackAfro比這麼說:) –

問題不在於您的條件沒有達到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 
     } 
    }

來源

2017-05-28 16:42:25

在你的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)

來源

2017-05-28 16:43:52

如何使用js對一個元素進行固定和取消固定

回答

相關問題