Question

我想在我的页面上构建一个类似于http://dootrix.com/的导航栏效果（在向下滚动条形图变小并且徽标更改后）。我在我的页面使用bootstrap 3。有没有一种简单的方法来通过引导来实现它？

Answer 1

粘性导航栏：

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

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

官方示例：
http://getbootstrap.com/examples/navbar-fixed-top/

一个简单的示例代码：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

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

调整导航栏的大小：

如果您希望在滚动页面时调整导航栏的大小，可以查看此示例：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;
}

动画：

要在滚动时添加动画，您需要做的就是在导航

上设置转场

<强> CSS

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

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

Answer 2

toggleClass也适用：

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

Answer 3

对于那些不愿意使用 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)

};

使用切换可能有更好的方法，但上面的工作正常Chrome

Answer 4

您可以合并“滚动”和"scrollstop"事件，以获得所需的结果：

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

Answer 5

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

你可以这样做很好：

<强> 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：（注意这里我使用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;
}

然后添加你的指令

指令 :( 注意您可能需要将this.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();
    });
  };
});

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

Answer 6

我正在将此代码用于我的项目

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

可能这会有所帮助

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

6 个答案:

粘性导航栏：

调整导航栏的大小：

动画：