[英]How to pin and unpin an element using js
因此,基本上,我正在处理的页面上有一个侧面导航,并且我尝试将其固定在滚动轴上,并在到达某个点时取消固定。 现在,这个问题的目的不仅仅是获得直接答案,我还想对为什么我的代码无法正常工作进行一些解释。
当我将其固定到页面时,代码都很好,但是当它到达页脚部分时,我希望它取消固定,这让我有些头疼。
我尝试了这个:
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”变量时不会取消固定,而是滚动经过它并取消固定在底部附近。 我想了解为什么会发生这种情况,并找到解决此问题的正确方法。 谢谢
问题不是您的条件没有达到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
}
}
在您的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)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.