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

Question

所以基本上我在我正在处理的页面上有一个侧边导航，我试图将它固定在滚动上并在它到达某个点时取消固定。现在这个问题的目的不仅仅是获得直接答案，我还想解释一下为什么我的代码不起作用。

当我将代码固定到页面时，代码一切正常，但我希望它在到达页 footer 分时取消固定，这是我有点头疼的地方。

我试过这个:

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)

现在我遇到的问题是，当它到达“结束”变量时并没有取消固定，而是滚动经过它并在靠近底部的某个地方取消固定。我想了解为什么会发生这种情况并找到解决此问题的正确方法。 谢谢

Answer 1

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