Javascript 将导航粘贴到滚动页面的网页顶部不起作用

我正在尝试将一些脚本应用到导航，我希望导航在滚动到时能够粘贴到页面顶部。我知道这是可以做到的，就像我以前做过的那样，而且已经奏效了。但是这次它不起作用了

我正在使用此代码-

网址如下：

我不知道javascript是否只是不起作用，或者是否有其他风格的干扰。任何帮助都将不胜感激

HTML

---

你试过使用粉底的粘性功能吗？需要更少的JS。还是引导的位置粘性值？这两种方法都是使用导航栏快速完成所需操作的方法。有关进一步说明的链接如下：

但是，如果您正在使用您提供的链接中的CSS和JS：

CSS:

JS:

---

这应该是有效的，我自己已经测试过了。您的站点还使用了哪些JS代码？看不出它是否干扰了这个JS代码

这与前面的评论非常相似，添加了一个基于滚动位置的类-始终适用于我

您的jquery将如下所示

 $(document).ready(function(){
 $(window).scroll(function(){
 if ($(window).scrollTop() > 170){
    $('nav').addClass( "nav-fix-top");  
}

  else {

        $('nav').removeClass( "nav-fix-top");
    }
  });
});

“nav fix top”类的css中有如下内容：

position:fixed;
top:0;
left:0;
right:0;
margin:auto;
width:100%;
max-width:2000px

---

在您的特定情况下，问题似乎是创建变量的范围，这取决于您的设置。如果将创建变量的两行移动到main函数中，使其成为函数的局部变量，则应可以：

window.onscroll = function() {myFunction()};

function myFunction() {
  var navbar = document.getElementById("navbar");
  var sticky = navbar.offsetTop;
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

---

请至少发布您尝试过的内容。请将您拥有的所有代码包含在代码片段中，以便我们可以查看。您是否添加了代码，我在网站上没有看到它或类似的内容。在源代码中搜索“滚动”，但未找到任何内容。

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

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

.sticky + .content {
  padding-top: 60px;
}

window.onscroll = function() {myFunction()};

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

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

 $(document).ready(function(){
 $(window).scroll(function(){
 if ($(window).scrollTop() > 170){
    $('nav').addClass( "nav-fix-top");  
}

  else {

        $('nav').removeClass( "nav-fix-top");
    }
  });
});

position:fixed;
top:0;
left:0;
right:0;
margin:auto;
width:100%;
max-width:2000px

window.onscroll = function() {myFunction()};

function myFunction() {
  var navbar = document.getElementById("navbar");
  var sticky = navbar.offsetTop;
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}