Question

我知道这里已经提到过非常相似的事情了，我已经注意到了它们 - 但是对于我的生活，我却无法让它发挥作用。我还必须承认，我是角色和放大器的新手。引导;

当用户向下滚动页面时，我想要一个阴影用于导航栏（因此当它们向上滚动时，阴影应该消失）。

在导航栏上添加阴影的CSS工作正常 - 以及阴影显示。我在这里没有得到任何Javascript错误，所以为什么我有点丢失。

无论如何，这是我的代码的不同部分...... 索引页上的部分HTML;

  <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src='js/moment.min.js'></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>-->
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-sanitize.min.js"></script>
<script src="js/ng-csv.min.js"></script>
<script src="js/app.js"></script>
<script src="js/navbar-scroll.js"></script>

自定义Navbar CSS：

    /* ==== CUSTOM STYLING FOR NAVBAR ==== */
.navbar-xs { min-height:65px; height: 65px; background-color: #ffffff; border: 0;} /* box-shadow: 0px 0px 0px #888888;} */
.navbar-xs .navbar-brand{ padding: 0px 12px; font-size: 20px; line-height: 35px; background-color: #ffffff;}
.navbar-xs .navbar-nav > li > a {  padding-top: 15px; padding-bottom: 5px; line-height: 28px; color: #000fb5;}

我希望应用导航栏效果的HTML模板;

    <div class="jumbotron jumbotron-custom">
  <div class="container">
    <h2 class="text-center" style="color: #27ace5; font-family: 'Kaushan Script', cursive;"><b>Our History</b></h2>
  </div>
</div>

<div id="startchange">

<div class="container">
  <div class="jumbotron">
    <h5><i>......</i></h5>
      <p>....</p>
      <p>....</p>
   </div>
  </div>
</div>

最后，navbar-scroll.js代码，它应该执行效果

    $(document).ready(function(){
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() {
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
        $(".navbar-xs").css('box-shadow', '1px 1px 15px #888888');
       } else {
        $(".navbar-xs").css('box-shadow', '0px 0px 0px #888888');
       }
   });
    }
});

Answer 1

仅纯javascript答案（不像其他答案一样使用jQuery）-

假设您的Nav有一个“ nav”类。

将此代码添加到<body>的{{1}}底部

index.html

在您的CSS文件中，添加<script> window.addEventListener('scroll',(e)=>{ const nav = document.querySelector('.nav'); if(window.pageYOffset>0){ nav.classList.add("add-shadow"); }else{ nav.classList.remove("add-shadow"); } }); </script>类中阴影的代码-

.add-shadow

工作方式-

滚动页面时，浏览器将触发滚动事件。我们正在侦听此滚动事件，然后检查页面Y偏移。如果pageYOffset的值大于0，则表明页面已向下滚动，因此我们将“ add-shadow”类添加到Nav中；否则，如果pageYOffset为0，则从其中删除“ add-shadow”类。

希望有帮助。编码愉快：）

Answer 2

使用ES6

<h1 style="text-align: center;" id= "header">Header</h1>


<script type="text/javascript">
  const headerShadow = () => {
    var header = document.getElementById("header");
    var sticky = header.offsetTop;

    if (window.pageYOffset > sticky) {
      header.classList.add("add-shadow");
    } else {
      header.classList.remove("add-shadow");
    }
  };

  window.addEventListener("scroll", headerShadow);

</script>

导航栏更改为在滚动

2 个答案: