个人中心
gpt4 book ai didi

javascript - 自从我将其从id更改为class以来，为什么我的粘性导航栏停止工作？

转载 作者：行者123 更新时间：2023-12-01 09:41:42 25 4
gpt4 key购买 nike

我需要将导航栏从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;}

最佳答案

函数 getElementsByClassName 返回一个元素数组。如果您知道只有一个，并且需要选择它，则需要执行以下操作:

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

关于javascript - 自从我将其从id更改为class以来，为什么我的粘性导航栏停止工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59518472/

25 4 0
文章推荐： java - 向下滚动时 ListView 图标出现在错误的行中
文章推荐： java - HQL错误 "Could not resolve property"
文章推荐： java - jar 文件不显示(关闭太快)
文章推荐： scala future 和 fallbackTo
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com