Javascript 滚动回顶部时导航栏位置保持固定

实际上，我试图在滚动时实现一个粘性导航，我使用javascript

if…else

语句向

#navbar

添加一类

.sticky

，如果onscroll大于

#navbar

偏移，则删除

的类。sticky

并添加

位置：固定和<代码>宽度：100%和<代码>顶部：0

到

.sticky

，幸运的是，如果滚动大于

#navbar

偏移量，则会将

.sticky

类添加到

#navbar

我的问题是：-当滚动小于

#navbar

偏移量时，

.sticky

类不会删除，并且当滚动回到顶部时，

#navbar

保持不变，如何修复滚动小于

#navbar

偏移量时，我的navbar将恢复正常

HTML

脸泥

问题是函数不断重新计算偏移量，因为事件绑定到
onscroll
。这意味着当设置为粘性时，偏移量变得不可预测。您可以通过在函数外部拉出
offsetTop
变量来解决此问题，因此它只计算一次

问题是函数不断重新计算偏移量，因为事件绑定到
onscroll
。这意味着当设置为粘性时，偏移量变得不可预测。您可以通过在函数外部拉出
offsetTop
变量来解决此问题，因此它只计算一次

<header>
    <p>FaceMash</p>
    <div id="headnotify">
        <a href="#">The issue is that your function constantly recalculates the offset because your event is bound to 
onscroll
. What this means is that when it is set to 
sticky
, the offset becomes unpredictable. You can fix this by pulling out the 
offsetTop
 variable outside of the function, so it is calculated only once.


var navbar = document.getElementById("navbar");
var navbarOffset = navbar.offsetTop;

window.onscroll = function () {
    window.pageYOffset >= navbarOffset ? navbar.classList.add('sticky') : navbar.classList.remove('sticky')
}