1. 首页
  2. 问答
  3. 滚动时隐藏bootstrap导航栏

滚动时隐藏bootstrap导航栏

2017-08-29 153 views
2

我试图在向下滚动/向上时隐藏/显示Bootstrap导航栏，但似乎不起作用。我卡住了，我真的很感谢这里的一些帮助。谁能告诉我我做错了什么？请记住，我正在学习如何使用Bootstrap，并且对jQuery了解甚少。 当我用浏览器控制台检查代码时，它不显示任何错误。 我也试过fadeIn和fadeOut以及addClass和removeClass函数，但没有运气。滚动时隐藏bootstrap导航栏

$(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.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/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.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

来源

2017-08-29 AtlantisNaranja

+0

你忘了''＃'在$（ “旗帜”）显示（）;' –

+0

这将有助于http://jsfiddle.net/nwV2r/699/ –

+0

Sanchit Patiyal感谢这一点。我试图在我的代码中实现它，但它不起作用。 – AtlantisNaranja

回答

1

有两个问题向上滚动时防止你的代码显示后面的导航栏：

  1. 行$("banner").show(); =>有“＃” banner前失踪。
  2. 隐藏元素时，其高度不会保留。因此，在已经隐藏之后测试nvarbar高度时，会得到意想不到的结果。因此，我建议预先保存高度并将其与保存的变量进行比较。

固定代码是：

$(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.com/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.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/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.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

来源

2017-08-29 09:45:23 Tomer

+0

非常感谢。它像一个魅力！我不知道为什么我以前看不到这个。 – AtlantisNaranja

+0

很高兴能帮到你:) – Tomer

+0

对不起@Tomer，还有一件事。当我向上滚动时，无论我的滚动位置如何，我的导航栏都不显示。它只显示我是否在页面的顶部。我怎样才能解决这个问题？谢谢 – AtlantisNaranja

0

尝试定义旗帜的高度滚动功能外，你也忘了＃，你的脚本看起来像这样

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

     });

来源

2017-08-29 09:43:24 user8262087

0

我有固定的代码为你添加了一些评论， 尝试打开控制台并滚动查看发生了什么。

基本上，您将滚动高度与从40更改为-16时的横幅高度进行比较，因此您必须先保存它。

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

希望它可以帮助

来源

2017-08-29 09:44:36 bonbonvoyage

0

Banner height应scroll函数之外进行计算。

$(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.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/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.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

来源

2017-08-29 09:48:22

相关问题

 相关问题