为什么我的粘性导航栏在我将其从 id 更改为 class 后停止工作？

Question

我需要将我的导航栏从 id 更改为 class，但是当我这样做时，粘性部分停止工作。我只希望导航栏像它是 id 时一样，就像这里一样； https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_sticky。它停止工作可能与我的 html 文档末尾的脚本有关，但我对 javascript 还不是很了解.. 谁能帮助我？这是我的 html;

<!doctype html>
<html>
 <head>
      <meta charset="UTF-8">
      <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>    
<div class="ad">
   Bepaalde boeken tot -50% + gratis levering bij bestellingen boven €50!
  </div>

   <div>    <ul class="navbar">
    <li class="links"><a href="index.html">BookShop</a></li>
      <li class="links"><a></a></li>
    <li class="links"><a href="Talen.html">Talen</a></li>
    <li class="links"><a href="Genres.html">Genres</a></li>
    </ul>    </div>
<p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p><p>Some text to enable scrolling..</p>

<script>
window.onscroll = function() {myFunction()};

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

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

</body>
</html>

我的css；

.ad {
    background-color: #fbf4e9;
    text-align: center;  
    font-size:0.9rem;
    padding:5px;
}
.sticky {
    position: fixed;
    top: 0;
}
ul.navbar {
    overflow:hidden;
    list-style-type:none;
    background-color:#f9eedd;
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    z-index:10;
    } 
ul.navbar li a{ 
    display:block;
    color:#8e8275;
    text-decoration:none;
    text-align: center;
    padding: 13px 10px 13px 10px;
    margin: 10px 7px 10px 7px
    }
ul.navbar li.links{ float:left;}

Answer 1

函数 getElementsByClassName returns 元素数组。如果您知道自己只有一个并且需要 select，则需要执行以下操作：

var navbar = document.getElementsByClassName("navbar")[0]; //select first element
var sticky = navbar.offsetTop;

Answer 2

因为 'getElementsByClassName' returns 数组你需要在你的 javascript 中写入 getElementsByClassName[0] 以便它变成：

var 导航栏 = document.getElementsByClassName("navbar")[0];

我也根据您的要求进行了修改。创建了类而不是 ID。

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

var navbar = document.getElementsByClassName("navbar")[0];
var sticky = navbar.offsetTop;

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

body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.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;
}

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div class="navbar">
  <a class="active" href="javascript:void(0)">BookShop</a>
  <a href="javascript:void(0)">Talen</a>
  <a href="javascript:void(0)">Genres</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
  <p>Some text to enable scrolling..</p>
</div>

希望对您有所帮助。

Answer 3

document.getElementsByClassName("navbar"); returns 元素的集合，因此您可以使用 var navbar = document.getElementsByClassName("navbar")[0] 来获取具有 "navbar" class.[=12 的元素=]

Answer 4

在你的脚本中使用它

var navbar = document.getElementsByClassName("navbar")[0];

希望对您有所帮助

为什么我的粘性导航栏在我将其从 id 更改为 class 后停止工作？

Why has my sticky navbar stopped working since I changed it to class from id?

html

javascript

css

sticky

navbar