Javascript 带JS的粘性导航条

您好，我一直在尝试创建一个带有香草javascript的粘性导航栏，所以当我滚动徽标时。navbar将保持粘性，但没有成功，因为有一些错误我无法修复，我请求您的帮助，如果有人可以查看下面的代码并帮助我，谢谢

let nav=document.querySelector（'.nabar'）；
让topToNav=nav.offsetTop；
让logo=document.querySelector（'.logo'）；
函数stickyNav（）{
如果（window.scrollY>=topToNav）{
logo.style.paddingTop=nav.offsetHeight+'px'；
logo.classList.add（'fixed'）；
}否则{
logo.style.paddingTop=0；
logo.classList.remove（'fixed'）；
}
}
window.addEventListener（'scroll'，stickyNav）
.nabar{
背景色：深灰色；
填充：15px 0px；
}
李国宝先生{
列表样式：无；
显示：内联；
字体大小：20px；
填充：0px 15px 0px 15px；
}
纳巴尔·乌尔先生{
文本对齐：居中；
}
纳巴：悬停{
文字装饰：无；
颜色：白色；
}
纳巴先生{
颜色：白色；
}
.修好了，纳巴{
位置：固定；
宽度：100%；
排名：0；
左：0；
盒影：0 3px 6px rgba（黑色，.3）；
}
.测试{
高度：600px；
背景：黄色；
}
.test2{
高度：609px；
背景：绿色；
}
.标志{
高度：100px；
}
.登录{
宽度：240px；
高度：100px；
保证金：0自动；
显示：块；
}









css.fixed.primary导航（中间有空格）指的是该元素：

<div class="fixed">
    <div class="primary-nav" />
</div>

去掉.primary导航部分，你甚至没有一个元素具有该类…
尝试包装你的导航和徽标，将它们都粘贴在thop上，如下面的代码所示

为了保持导航的宽度，请使用
position:sticky取而代之
位置：固定


window.onscroll=function（）{stickyNav（）}；
var mynavbar=document.getElementById（“我的navbar”）；
var sticky=mynavbar.offsetTop；
函数stickyNav（）{
如果（window.pageYOffset>sticky）{
mynavbar.classList.add（“固定”）；
}否则{
mynavbar.classList.remove（“固定”）；
}
}
.nabar{
背景色：深灰色；
填充：15px 0px；
}
李国宝先生{
列表样式：无；
显示：内联；
字体大小：20px；
填充：0px 15px 0px 15px；
}
纳巴尔·乌尔先生{
文本对齐：居中；
}
纳巴：悬停{
文字装饰：无；
颜色：白色；
}
纳巴先生{
颜色：白色；
}
.固定{
位置：粘性；
宽度：100%；
排名：0；
左：0；
盒影：0 3px 6px rgba（黑色，.3）；
}
.测试{
高度：800px；
背景：黄色；
}
.标志{
高度：100px；
}
.登录{
宽度：240px；
高度：100px；
保证金：0自动；
显示：块；









是的，我将.primary nav替换为.nabar，因为这应该是指.nabar。但我犯了一个错误，将其替换了，但仍然粘滞的navbar不起作用。我不太明白，你想同时粘贴nav和logo，还是只粘贴nav？不，只粘贴nav，但在滚动logo后，navbar会显示出与你相同的代码我刚刚添加了一个背景色和一个更高的高度。测试和导航栏保持粘性，但不会在顶部移动，当你滚动时，它保持不变，当你滚动时，导航栏的宽度变大。
.fixed .primary-nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  box-shadow: 0 3px 6px rgba(black, .3);
}