最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - hide bootstrap navbar when scrolling - Stack Overflow

programmeradmin2浏览0评论

I'm trying to hide/show a Bootstrap navbar when scrolling down/up but it does not seem to work. I'm stuck and I would really appreciate some help here. Could anyone tell me what I am doing wrong? Please bear in mind I'm learning how to use Bootstrap and got very little knowledge about jQuery. When I check the code with the browser console it does not show any error. I have also tried fadeIn and fadeOut as well as addClass and removeClass functions with no luck.

$(document).ready(function() {

  var banner = $("#navscroll");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= banner.height()) {
      $("#banner").hide();

    } else {
      $("banner").show();
    }
  });

});

console.log();
body {
  background-color: azure;
}

.divi {
  width: 500px;
  height: 500px;
}

#divi1 {
  background-color: red;
}

#divi2 {
  background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href=".0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src=".1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <!-- Stylesheet for Mysite -->


  <title>My Site</title>

</head>

<body>

  <!-- Banner -->
  <div id="banner" class="container-fluid">
    <nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <a class="navbar-brand" href="#">My Site</a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">What I do</a>
          <a class="nav-item nav-link" href="#">Find Me</a>
        </div>
      </div>
    </nav>
  </div>
  <!-- Banner -->

  <!-- Divs -->
  <div class="container-fluid">
    <div id="divi1" class="divi"></div>
    <div id="divi2" class="divi"></div>
  </div>
  <!-- Divs -->



  <!-- jQuery first, then Tether, then Bootstrap JS. -->

  <script src=".4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src=".0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

I'm trying to hide/show a Bootstrap navbar when scrolling down/up but it does not seem to work. I'm stuck and I would really appreciate some help here. Could anyone tell me what I am doing wrong? Please bear in mind I'm learning how to use Bootstrap and got very little knowledge about jQuery. When I check the code with the browser console it does not show any error. I have also tried fadeIn and fadeOut as well as addClass and removeClass functions with no luck.

$(document).ready(function() {

  var banner = $("#navscroll");
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= banner.height()) {
      $("#banner").hide();

    } else {
      $("banner").show();
    }
  });

});

console.log();
body {
  background-color: azure;
}

.divi {
  width: 500px;
  height: 500px;
}

#divi1 {
  background-color: red;
}

#divi2 {
  background-color: greenyellow;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery./jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <!-- Stylesheet for Mysite -->


  <title>My Site</title>

</head>

<body>

  <!-- Banner -->
  <div id="banner" class="container-fluid">
    <nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <a class="navbar-brand" href="#">My Site</a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">What I do</a>
          <a class="nav-item nav-link" href="#">Find Me</a>
        </div>
      </div>
    </nav>
  </div>
  <!-- Banner -->

  <!-- Divs -->
  <div class="container-fluid">
    <div id="divi1" class="divi"></div>
    <div id="divi2" class="divi"></div>
  </div>
  <!-- Divs -->



  <!-- jQuery first, then Tether, then Bootstrap JS. -->

  <script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

Share Improve this question edited Aug 29, 2017 at 15:54 jmattheis 11.1k12 gold badges49 silver badges62 bronze badges asked Aug 29, 2017 at 9:31 AtlantisNaranjaAtlantisNaranja 331 silver badge6 bronze badges 3
  • You forgot # in $("banner").show(); – Mosh Feu Commented Aug 29, 2017 at 9:37
  • This will help jsfiddle/nwV2r/699 – Sanchit Patiyal Commented Aug 29, 2017 at 9:38
  • Sanchit Patiyal thanks for this. I'm trying to implement it in my code but it does not work.. – AtlantisNaranja Commented Aug 29, 2017 at 9:57
Add a ment  | 

4 Answers 4

Reset to default 4

There are two issues preventing your code from showing the navbar back when scrolling up:

  1. The line $("banner").show(); => there is "#" missing before banner.
  2. When hiding an element, its height isn't kept. Therefore, when testing the nvarbar height after it's already hidden, you get an unexpected result. Therefore, I remend to save the height in advance and pare it to the saved variable.

The fixed code is:

$(document).ready(function() {
  var banner_height = $("#navscroll").height();
  var lastScrollTop = 0;
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    var currScrollTop = $(this).scrollTop();
    if (scroll >= banner_height && currScrollTop > lastScrollTop) {
      $("#banner").hide();
    } else {
      $("#banner").show();
    }
    lastScrollTop = currScrollTop;

  });

});
body {
  background-color: azure;
}

.divi {
  width: 500px;
  height: 500px;
}

#divi1 {
  background-color: red;
}

#divi2 {
  background-color: greenyellow;
}
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <script src="https://code.jquery./jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <!-- Stylesheet for Mysite -->

  <title>My Site</title>

</head>

<body>

  <!-- Banner -->
  <div id="banner" class="container-fluid">
    <nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <a class="navbar-brand" href="#">My Site</a>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
          <a class="nav-item nav-link" href="#">What I do</a>
          <a class="nav-item nav-link" href="#">Find Me</a>
        </div>
      </div>
    </nav>
  </div>
  <!-- Banner -->

  <!-- Divs -->
  <div class="container-fluid">
    <div id="divi1" class="divi"></div>
    <div id="divi2" class="divi"></div>
  </div>
  <!-- Divs -->

  <script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

Try to define banner height outside the scroll function and also you forgot #, your script looks like this

$(document).ready(function(){

                var banner = $("#navscroll");
                var bannerHeight = banner.height();
                $(window).scroll(function(){
                    var scroll = $(window).scrollTop();
                    if (scroll >= bannerHeight){
                        $("#banner").hide();
                    } else {
                        $("#banner").show();
                    }
                });

        });

I have fixed the code for you and added some ments, try to open console and scroll to see what is happening.

Basicly you were paring scroll height to the banner height which changed from 40 to -16 when it got hidden, so you have to save it before.

        $(document).ready(function(){
            var banner = $("#navscroll");
             var bannerStartHeight = $("#navscroll").height();
            $(window).scroll(function(){
                var scroll = $(window).scrollTop();
                console.log("SCROLL: "+scroll)
                console.log("BANNER HEIGHT:"+banner.height())
                console.log("BANNER START HEIGHT: "+bannerStartHeight)
                if (scroll >= bannerStartHeight){
                    $("#banner").hide();
                } else {
                    $("#banner").show(); //here u forgot a #
                }
            });
    });

Hope it helps

Banner height should be calculated outside the scroll function.

$(document).ready(function() {

  var banner = $("#navscroll");
  var bannerHgt = banner.height();
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= bannerHgt) {
      $("#banner").hide();
    } else {
      $("#banner").show();
    }
  });

});

console.log();
 body{
    
            background-color: azure;
        }

        .divi{

            width: 500px;
            height: 500px;
        }

        #divi1{

            background-color: red;
        }

        #divi2{

            background-color: greenyellow;
        }  
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://code.jquery./jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <!-- Stylesheet for Mysite -->  
      
      
    <title>My Site</title> 
         
  </head>
            
  <body>
      
    <!-- Banner --> 
    <div id="banner" class="container-fluid">
        <nav id="navscroll" class="navbar navbar-toggleable-sm navbar-light fixed-top">
          <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <a class="navbar-brand" href="#">My Site</a>
          <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
            <div class="navbar-nav">
              <a class="nav-item nav-link active" href="#">Me<span class="sr-only">(current)</span></a>
              <a class="nav-item nav-link" href="#">What I do</a>
              <a class="nav-item nav-link" href="#">Find Me</a>
            </div>
          </div>
        </nav>  
    </div> 
    <!-- Banner -->
    
    <!-- Divs -->
    <div class="container-fluid">
        <div id="divi1" class="divi"></div>  
        <div id="divi2" class="divi"></div>  
    </div>  
    <!-- Divs -->  
      
 

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    
    <script src="https://cdnjs.cloudflare./ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  </body>
</html>

发布评论

评论列表(0)

  1. 暂无评论