javascript - Navbar changing to add shadow on Scroll - Stack Overflow

admin管理员组

文章数量:1419183

I know very similar things have already been asked here, and I have taken note of them - but for the life of me I just can't get it to work. I have to also admit that I am new to developing with angular & Bootstrap;

As a user Scrolls down the page, I want a Shadow for the Navbar to appear (and thus as they scroll back up, the shadow should disappear).

Just adding the CSS for the shadow on the navbar works fine - and the shadow display's. And I'm not getting any Javascript errors here, so thus why im kinda lost.

Anyway, this is different segment's of my code... partial HTML on Index Page;

  <!-- 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=".1.1/jquery.min.js"></script>-->
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src=".5.7/angular.min.js"></script>
<script src="//ajax.googleapis/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src=".4.8/angular-animate.js"></script>
<script src=".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>

Custom 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 template which I want the navbar effect applied on;

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

And finally, navbar-scroll.js code, which should execute the effect

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

I know very similar things have already been asked here, and I have taken note of them - but for the life of me I just can't get it to work. I have to also admit that I am new to developing with angular & Bootstrap;

As a user Scrolls down the page, I want a Shadow for the Navbar to appear (and thus as they scroll back up, the shadow should disappear).

Just adding the CSS for the shadow on the navbar works fine - and the shadow display's. And I'm not getting any Javascript errors here, so thus why im kinda lost.

Anyway, this is different segment's of my code... partial HTML on Index Page;

  <!-- 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./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./ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis./ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis./ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://ajax.googleapis./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>

Custom 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 template which I want the navbar effect applied on;

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

And finally, navbar-scroll.js code, which should execute the effect

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

Share Improve this question Follow asked Dec 5, 2016 at 5:33 BlissSolBlissSol 41811 gold badge1313 silver badges2828 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Only pure javascript answer (Without the use of jQuery as in other answers)-

Suppose you have a "nav" class to your Nav.

Add this code at the bottom of your <body> in your index.html

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

In your CSS file add code for the shadow in .add-shadow class-

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

How is it working-

When you scroll the page, the browser fires a scroll event. We are listening to this scroll event and then checking the page Y offset. If the value of pageYOffset is greater than 0 then it indicates that the page has scrolled down and hence we are adding the "add-shadow" class to the Nav otherwise if pageYOffset is 0 then we remove "add-shadow" class from it.

Hope it helps. Happy coding :)

Add this code to your java script. and add the class "shadow-header" to your header to have the shadow effect you want

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

This will be css part

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

I found the answer ~ for some reason its not executing the code from navbar-scroll.js on the template page;

By simply adding the javascript at the end of my HTML (on the template), then it works; So the HTML template now looks like;

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

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

本文标签： javascriptNavbar changing to add shadow on ScrollStack Overflow