时间戳

首页 > 解决方案 > 如何修复“使用 Materialize css 的粘性导航栏”

javascript - 如何修复“使用 Materialize css 的粘性导航栏”

问题描述

我正在尝试将导航栏粘贴到窗口顶部，在窗口滚动约 50 像素后，导航栏不再粘贴。谁能解决我的问题。我被困住了。我没有关于javascript和物化css的适当知识提前谢谢

<!--Style-->
<style>
        .header{
            width: 100%;
            height: 50px;
            padding: 2px 30px;
        }

        .box{
            height: 500px;
            margin-top: 100px; 
        }

        .sticky-nav{
            position: fixed;
            top: 0;
            width: 100%;
        }
    </style>

    <!--Adding JQuery Script for Sticky navbar-->
    <script>
        $(window).scroll(function() {
            if($(this).scrollTop()>50){
                $('nav').addClass('sticky-nav');
            }else{
               $('nav').removeClass('sticky-nav');
            }               
         });
    </script>

</head>
<body>


</div>

<!--navbar-->
<nav>
    <div class="nav-wrapper">
        <div class="container">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Article</a></li>
                <li><a href="#">Login</a></li>
                <li><a href="#">Signup</a></li>
                <li><a href="#">India</a></li>
            </ul>
        </div>
    </div>
</nav>

<!--Sample Boxes -->

<div class="container">
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box blue"></div>
</div>
</body>
</html>

标签： javascripthtmlcssmaterialize

解决方案

它是“粘性的”并且可以正常工作：

$(window).scroll(function() {
  if ($(this).scrollTop() > 50) {
    $('nav').addClass('sticky-nav');
  } else {
    $('nav').removeClass('sticky-nav');
  }
});
.header {
  width: 100%;
  height: 50px;
  padding: 2px 30px;
}

.box {
  height: 500px;
  margin-top: 100px;
}

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

nav {
  background-color: skyblue;
}

body {
  height: 1000vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <div class="nav-wrapper">
    <div class="container">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Article</a></li>
        <li><a href="#">Login</a></li>
        <li><a href="#">Signup</a></li>
        <li><a href="#">India</a></li>
      </ul>
    </div>
  </div>
</nav>

推荐阅读