向下滚动时缩小导航栏(bootstrap3)

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中运行良好