向下滚动缩小导航栏（bootstrap3） [英] Shrinking navigation bar when scrolling down (bootstrap3)

问题描述

我想在我的网页上 http://dootrix.com/ 建立导航栏效果（滚动后）下来的酒吧越来越小，标志改变）。我使用引导3为我的页面。

解决方案

粘性导航栏：

要进行粘性导航，您需要将 navbar-fixed-top 类添加到导航

：

http://getbootstrap.com/components/#navbar-fixed- top

官方示例：

http://getbootstrap.com/examples/navbar-fixed-top/

示例代码：：

 < nav class =navbar navbar-default navbar-fixed-toprole = navigation> 
< div class =container> 
 ... 
< / div> 
< / nav> 
  

与相关的 jsfiddle ： http://jsfiddle.net/ur7t8/

调整navbar的大小：

如果您希望导航栏在滚动页面时调整大小，您可以查看此示例： http：// www .bootply.com / 109943

JS

  $（window）.scroll（function（）{
 if（$（document）.scrollTop（）> 50）{
 $ 'nav'）。addClass（'shrink'）; 
} else {
 $（'nav'）。removeClass（'shrink'）; 
} 
} 
   
 
 
 
    
 $ b 
  nav.navbar.shrink {
 min-height：35px; 
} 
  
 
 
 
动画：
 
 
 
要在滚动时添加动画，您只需在nav上设置转换
 
 
 
   CSS   
  nav.navbar {
 background-color：#ccc; 
 //动画
 -webkit-transition：all 0.4s ease; 
 transition：all 0.4s ease; 
} 
  
 
 
 
 
 
 
 > jsfiddle 和完整的示例代码： http://jsfiddle.net/Filo/m7yww8oa/  
 
I would like to build a navigation-bar effect like it is on http://dootrix.com/ on my page (after scrolling down the bar getting smaller and the logo changes). Im using bootstrap 3 for my page. Is there an easy way to realize it with bootstrap?
解决方案
Sticky navbar:

To make a sticky nav you need to add the class navbar-fixed-top to your nav  

Official documentation:

http://getbootstrap.com/components/#navbar-fixed-top  

Official example:

http://getbootstrap.com/examples/navbar-fixed-top/

A simple example code:  
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>
with related jsfiddle:  http://jsfiddle.net/ur7t8/

Resize the navbar:

If you want  the nav bar to  resize while you scroll the page you can give a look to this example: http://www.bootply.com/109943

JS  
$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});
CSS  
nav.navbar.shrink {
  min-height: 35px;
}


Animation:

To add an animation while you scroll, all you need to do is set a transition on the nav  

CSS
nav.navbar{
  background-color:#ccc;
   // Animation
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}




I made a jsfiddle with the full example code:  http://jsfiddle.net/Filo/m7yww8oa/

                        
这篇关于向下滚动缩小导航栏（bootstrap3）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！