Question

我喜欢使用JQuery和Bootstrap，但是这次我试图从头开始设计它。除导航栏外，其他所有功能都正常运行。

这是设计顺序：

[upperHeader]
[导航栏]
[主要内容...]

JSFiddle =>到目前为止的样子。

我做了一些研究，发现了很多好的解决方案，但是所有这些都需要JQuery。大多数都这样：

$('#navbar').addClass('fix');

使用css添加和删除一个类，以使upperHeader的显示为“ none”，或将导航栏设置为top:0。

在不使用JQuery的情况下滚动到upperHeader之后，如何使导航栏停留在顶部？

Answer 1

您的javascript中的问题：

navbar是undefined。当您调用document.getElementById("navbar");时，HTML DOM尚未加载。
实际滚动的部分是body，而不是window。

要解决这两个问题，请修改您的javascript：

var navbar;
var sticky;

window.addEventListener("load",function(e){
    navbar = document.getElementById("navbar");
    sticky = navbar.offsetTop;
    document.body.addEventListener("scroll",function(e){myFunction()});
});


function myFunction() {
    console.log(document.body.scrollTop,sticky);
  if (document.body.scrollTop >= sticky) {
    navbar.classList.add("sticky")
    console.log(navbar.className);
  } else {
    navbar.classList.remove("sticky");
    console.log(navbar.className);
  }
}

最后一个问题是CSS：

#navbar .sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

#navbar .sticky在class="sticky"的元素中选择id="navbar"的元素。例如，<div>的内部<div id="navbar"><div class ="sticky"></div></div>在您的页面中不存在。

您想要#navbar.sticky的元素id="navbar" class="sticky"（删除它们之间的空间），它选择了<div id="navbar" class="sticky"></div>。

当然，您可以简单地使用position:sticky而不用弄乱JavaScript。

滚动过去标题后，无法使我的导航栏（没有框架/库）停留

1 个答案: