logo标签列表

无法使我的主导航栏成为固定导航栏

javascripthtmlcssnavbar
3
我已经为这个自己的项目创建了一个实用程序和主导航栏，我希望在滚动42像素时使主导航栏变为粘性。
然而，当我滚动时，导航栏没有固定在窗口顶部。我用实用程序导航进行了测试，它完美地工作了。这是我的主导航栏编码... 

$(window).on("scroll", function () {

 var distanceScrolled = $(window).scrollTop();

 console.log("The distance scrolled is: " + distanceScrolled);

 if(distanceScrolled>42){
  $("#main-nav").addClass("scrolled");
 }

 else{
  $("#main-nav").removeClass("scrolled");
 }
});
#main-nav {
 position: relative;
 width: 100%;
 height: 100px;
 background-color: #000000;
}

.main-nav-left {
 list-style: none;
 float: left;
 padding-left: 28px;
 height: 100px;
}

.main-nav-items {
 position: absolute;
 top: 40%;
 left: 290px;
 list-style: none;
 text-decoration: none;
}

.main-nav-items li {
 display: inline-block;
 padding-right: 12px;
 margin-right: 13px;
}

.main-nav-right li {
 float: right;
 padding-right: 12px;
 margin-right: 26px;
 margin-top: 40px;
 list-style: none;
}

#main-nav a {
 text-decoration: none;
 color: #ffffff;
}

.scrolled {
 position: fixed;
 top: 0;
 z-index: 1000;
}
<nav id="main-nav">
  <ul class="main-nav-left">
      <li><a href="#"><img src="images/thule_logo.png" height="100" width="auto"></a></li>
  </ul>
  <ul class="main-nav-items">
   <li><a href="#">CARRIERS & RACKS</a></li>
   <li><a href="#">ACTIVE WITH KIDS</a></li>
   <li><a href="#">LUGGAGE & BAGS</a></li>
   <li><a href="#">SLEEVES & CASES</a></li>
   <li><a href="#">EXPLORE THULE</a></li>
  </ul>
  <ul class="main-nav-right">
   <li><a href="#"><i class="fas fa-search fa-lg"></i></a></li>
  </ul>
</nav>

<script src="js/jquery-v3.3.1.js"></script>
<script src="js/main.js"></script>

2
你的代码片段中没有添加jQuery，从语法和控制台中的错误信息：“Uncaught ReferenceError: $ is not defined”来看，似乎是必需的。 - David Thomas
要将jQuery添加到您的HTML文件中，请在head部分中添加以下内容：<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> </head> - Ethan Ryan
你考虑过只使用position: sticky吗？（文档：W3C，MDN） - David Thomas
我忘记在片段中添加脚本标签了。 我的HTML中有两个脚本标签：<script type="text/javascript" src="js/jquery-v3.3.1.js"></script> <script type="text/javascript" src="js/main.js"></script> - Michael
我在“main-nav”标签周围添加了一个div，并在JS中调用它。它可以工作，但导航栏发生了变化。 - Michael
1个回答
1
首先，您的HTML nav元素没有定义“nav”类。因此在jQuery选择器中，您需要选择已定义的id（main-nav）或HTML nav元素本身。您可以这样做：
if(distanceScrolled>42){
        $("nav").addClass("scrolled");
    }

    else{
        $("nav").removeClass("scrolled");
}

or 

if(distanceScrolled>42){
            $("#main-nav").addClass("scrolled");
        }

        else{
            $("#main-nav").removeClass("scrolled");
    }

但在添加自定义脚本之前，请先添加jQuery库文件。

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous">
</script>

第二个也是最重要的事情就是你正在添加一个带有{position:fixed}的类（scrolled）。由于ID比Class具有更高的优先级，因此它不会允许类覆盖常见的CSS属性，例如在这种情况下的'position'。因此，您可以将!important添加到类选择器的属性中：

.scrolled{
    position:fixed!important;
    top: 0;
    z-index: 1000;
    }

编写深度CSS选择器，使其优先级高于ID。例如：

ul li a 
#main-nav.scrolled {
    position:fixed;
    top: 0;
    z-index: 1000;
}

两者都可以工作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接