导航栏更改以在 Scroll 上添加阴影答案

【问题标题】：Navbar changing to add shadow on Scroll导航栏更改以在 Scroll 上添加阴影
【发布时间】：2016-12-05 05:33:32
【问题描述】：

我知道这里已经有人问过非常相似的问题，并且我已经注意到它们 - 但对于我的生活，我就是无法让它发挥作用。我还必须承认，我是使用 Angular 和 Bootstrap 开发的新手；

当用户向下滚动页面时，我希望出现导航栏的阴影（因此当他们向上滚动时，阴影应该消失）。

只需为导航栏上的阴影添加 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>

自定义导航栏 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');
       }
   });
    }
});

【问题讨论】：

标签： javascript angularjs twitter-bootstrap-3 navbar

【解决方案1】：

只有纯 javascript 答案（没有像其他答案那样使用 jQuery）-

假设您的导航有一个“导航”类。

在index.html<body> 的底部添加此代码

    <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>

在您的 CSS 文件中，为 .add-shadow 类中的阴影添加代码-

.add-shadow
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px

它是如何工作的-

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

希望对您有所帮助。快乐编码:)

【讨论】：

属性window.pageYOffset 已弃用。请改用window.scrollY。

【解决方案2】：

将此代码添加到您的 java 脚本中。并将“shadow-header”类添加到您的标题中以获得您想要的阴影效果

$(window).scroll(function(){
    if ($(window).scrollTop() >= 30) {
       $('header').addClass('shadow-header');
    }
    else {
       $('header').removeClass('shadow-header');
    }
});

这将是 css 部分

.shadow-header{
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.22);
}

【讨论】：

不，那没有做任何事情......但如果我正确理解该代码，是否假设我的导航栏位于
元素中？因为我没有。
是的，我假设您在“标题”中有导航栏
您必须将标题替换为您导航栏所在的容器

【解决方案3】：

我找到了答案~由于某种原因它没有在模板页面上执行来自 navbar-scroll.js 的代码；

只需在我的 HTML 末尾（在模板上）添加 javascript，它就可以工作了；所以 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>

<script>
    $(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');
       }
   });
    }
});
</script>

【讨论】：

这个结果的有趣之处......只是在这个模板上单独使用<div id="startchange">，它实际上将这个效果应用于每个模板，在同一个地方 - 即使那些没有有; <div class="container"> <div class="jumbotron"> 包含在其中； - 这正是我想要的:-)
我必须对我之前的陈述做一个半更正；如果首先加载带有<div id="startchange"> 的模板 - 然后它将应用于每个模板。如果首先加载另一个没有<div id="startchange"> 的模板 - 那么它不会应用于任何页面。因此，要应用于每个模板，它应该被添加到 home.html，它总是首先加载，除非用户有另一个模板的直接 URL。

【解决方案4】：

通过使用 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>

【讨论】：