向下滚动时缩小导航栏（bootstrap3）

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?

我想建立一个导航栏效果，就像它在我的页面上的http://dootrix.com/上一样（向下滚动栏变得越来越小，徽标也会变化）。我在我的页面使用bootstrap 3。有没有一种简单的方法来实现它与bootstrap？

6 个解决方案

#1

Sticky navbar:

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

要制作粘性导航，您需要将navbar-fixed-top类添加到导航中

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

官方文档：http：//getbootstrap.com/components/#navbar-fixed-top

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

官方示例：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/

与相关的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

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

JS

JS

$(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

CSS

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

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/

我用完整的示例代码制作了一个jsfiddle：http：//jsfiddle.net/Filo/m7yww8oa/

#2

toggleClass works too:

toggleClass也适用：

$(window).on("scroll", function() {
    $("nav").toggleClass("shrink", $(this).scrollTop() > 50)
});

#3

For those not willing to use jQuery here is a Vanilla Javascript way of doing the same using classList:

对于那些不愿意使用jQuery的人来说，这是使用classList做同样的Vanilla Javascript方式：

function runOnScroll() {
    var element = document.getElementsByTagName('nav')  ;
    if(document.body.scrollTop >= 50) {
        element[0].classList.add('shrink')
    } else {
        element[0].classList.remove('shrink')
    }
    console.log(topMenu[0].classList)

};

There might be a nicer way of doing it using toggle, but the above works fine in Chrome

使用切换可能有一种更好的方法，但上述工作在Chrome中运行良好

#4

You can combine "scroll" and "scrollstop" events in order to achieve desired result:

您可以组合“scroll”和“scrollstop”事件以获得所需的结果：

$(window).on("scroll",function(){
   $('nav').addClass('shrink');
}); 
$(window).on("scrollstop",function(){
   $('nav').removeClass('shrink');
}); 

#5

If you are using AngularJS, and you are using Angular Bootstrap : https://angular-ui.github.io/bootstrap/

如果您使用的是AngularJS，并且您正在使用Angular Bootstrap：https：//angular-ui.github.io/bootstrap/

You can do this so nice like this :

你可以这样做很好：

HTML:

HTML：

<nav id="header-navbar" class="navbar navbar-default" ng-class="{'navbar-fixed-top':scrollDown}" role="navigation" scroll-nav>
    <div class="container-fluid top-header">
        <!--- Rest of code --->
    </div>
</nav>

CSS: (Note here I use padding as bigger nav to shrink without padding you can modify as you want)

CSS :(注意这里我使用padding作为更大的导航缩小而不填充你可以根据需要修改）

nav.navbar {
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;

  background-color: white;
  margin-bottom: 0;
  padding: 25px;
}

.navbar-fixed-top {
  padding: 0;
}

And then add your directive

然后添加您的指令

Directive: (Note you may need to change this.pageYOffset >= 50 from 50 to more or less to fulfill your needs)

指令:(注意您可能需要将此更改.pageYOffset> = 50从50到更多或更少以满足您的需求）

angular.module('app')
.directive('scrollNav', function ($window) {
  return function(scope, element, attrs) {
    angular.element($window).bind("scroll", function() {
      if (this.pageYOffset >= 50) {
        scope.scrollDown = true;
      } else {
        scope.scrollDown = false;
      }
      scope.$apply();
    });
  };
});

This will do the job nicely, animated and cool way.

这将很好地完成工作，动画和酷的方式。

#6

I am using this code for my project

我正在为我的项目使用此代码

$(window).scroll ( function() {
    if ($(document).scrollTop() > 50) {
        document.getElementById('your-div').style.height = '100px'; //For eg
    } else {
        document.getElementById('your-div').style.height = '150px';
    }    
}
);

Probably this will help

这可能会有所帮助