[英]How to pin and unpin an element using js
So basically I have a side nav on a page I'm working on and I'm trying to pin it on scroll and unpin when it reaches a certain point. 因此,基本上,我正在处理的页面上有一个侧面导航,并且我尝试将其固定在滚动轴上,并在到达某个点时取消固定。 Now the purpose of this question isn't to get direct answers only, I'll also like a bit of explanation as to why my code isn't working.
现在,这个问题的目的不仅仅是获得直接答案,我还想对为什么我的代码无法正常工作进行一些解释。
The code is all good when I'm pinning it to the page but I want it to unpin when it reaches the footer section, that's where I'm having a bit of headache. 当我将其固定到页面时,代码都很好,但是当它到达页脚部分时,我希望它取消固定,这让我有些头疼。
I tried this: 我尝试了这个:
HTML HTML
<div class="header"></div>
<div class="side-nav"></div>
<div>Rest of page content</div>
<div class="footer"></div>
JS 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)
Now the issue I'm having it doesn't unpin when it reaches "end" variable instead it scrolls past it and unpins somewhere near the bottom. 现在,我遇到的问题在到达“ end”变量时不会取消固定,而是滚动经过它并取消固定在底部附近。 I want to understand why this happens and find a proper way of fixing this.
我想了解为什么会发生这种情况,并找到解决此问题的正确方法。 Thanks
谢谢
The problem is not that your conditional isn't reaching if(scroll >= end)
since that will be true even if scroll >= navTop
. 问题不是您的条件没有达到
if(scroll >= end)
因为即使scroll >= navTop
,这也将成立。
What should nav.style.top
be if it's below end
? 如果
nav.style.top
在end
之下,应该是什么? Your original conditional always set it to offset
. 原始条件始终将其设置为
offset
。
Set nav.style.top = offset;
设置
nav.style.top = offset;
to the top of end
when the user scrolls past end
otherwise, you're setting nav.style.top
to 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
}
}
In your if/else statement the last condition never get reached. 在您的if / else语句中,永远不会达到最后一个条件。 I have amended your code to make your last condition reachable.
我已经修改了您的代码,以使您的上一个条件可以实现。
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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.