Question

我对网站编码相对较新，对堆栈溢出没有太多经验。由于某些原因，我的导航栏似乎不想坚持。我已经搜索过，但是找不到任何明显的问题。感谢您的帮助！

HTML

<script>
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");
  }
}
</script>

</head>
<body>

<div class="navbar" id="navbar">
  <a href="Contact.html">Contact</a>
  <a href="Passion.html">My Passions</a>
  <a href="About.html">About</a>
  <a class="active" href="index.html">Home</a>  
</div>

CSS

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

.navbar a{
  float: right;
  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;
}

如果您需要我提供其他帮助，请告诉我。

Answer 1

只需将此代码添加到您的.navbar类：

.navbar{
 position:fixed;
 }

并删除.sticky类。这将满足您的需求。

或者，如果您想节省时间但导航效果良好，则可以访问此链接并查看示例： Sticky Navigation Bar

Answer 2

您只需将类next_month_data[row_index] = data[2]留在sticky中即可解决此问题：

navbar

//just to occupy space
var cad='<br>';
for(i=0;i<1000;i++){
  cad+="<p>Something</p>";
  
}

document.getElementById('content').textContent=cad;

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

.navbar a{
  float: right;
  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;
}

Answer 3

如jmargolisvt所说：确保导航栏下方有足够的文本，以便您可以滚动页面。

我尝试了您的代码，当我在正文中添加了足够多的文本时，该代码便起作用了。

奖金提示：如果您使用的是Visual Studio Code，则可以使用“ lorem * 30”，然后按Tab键以添加虚拟文本。

Answer 4

您的代码运行正常。我只是使用上面的代码创建一个代码段，但无法解决任何问题。当用户滚动时，可以在导航栏中完美地添加 sticky 类。

可能您还面临其他任何问题。随时分享您的关注。谢谢

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");
  }
}

#wrapper {
  height: 800px;
}

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

.navbar a{
  float: right;
  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;
}

<div id="wrapper">
  <div class="navbar" id="navbar">
    <a href="Contact.html">Contact</a>
    <a href="Passion.html">My Passions</a>
    <a href="About.html">About</a>
    <a class="active" href="index.html">Home</a>  
  </div>
</div>

导航栏不粘

4 个答案: