如何使用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对一个元素进行固定和取消固定

回答

相关问题