如何将导航栏静态引导到固定滚动？

Question

当它到达页面顶部时,我想在滚动时将静态导航栏设置为固定导航栏.

有没有办法使用bootstrap 3 css或javascript获取它？

Answer 1

如果我没错,那么你想要实现的就是Sticky navbar.

使用几行jQuery并且滚动事件很容易实现:

$(document).ready(function() {

    var menu = $('.menu');
    var content = $('.content');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            menu.addClass('sticky');
            content.addClass('menu-padding');
        } else {
            menu.removeClass('sticky');
            content.removeClass('menu-padding');
        }
    }

    $(document).scroll();

});

我为你做了一个快速工作的样本,希望它有所帮助:http: //jsfiddle.net/yeco/4EcFf/

要使它与Bootstrap一起使用,您只需要在jsfiddle中添加或删除"navbar-fixed-top"而不是"sticky"类.

Answer 2

使用affixBootstrap附带的组件.从"navbar-static-top"开始,这会将其更改为fixed当标题的高度(导航栏上方的内容)达到时......

$('#nav').affix({
      offset: {
        top: $('header').height()
      }
}); 

http://bootply.com/107973

Answer 3

我很确定,你在期待什么.看看这个小提琴,这可能对你有帮助.

http://jsfiddle.net/JK52L/8/

你的HTML应该有类navbar-fixed-top或navbar-fixed-bottom.

HTML

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

JS

$(document).scroll(function(e){
    var scrollTop = $(document).scrollTop();
    if(scrollTop > 0){
        console.log(scrollTop);
        $('.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top');
    } else {
        $('.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top');
    }
});

Answer 4

这是使用Bootstrap的附加插件的解决方案:

HTML:

<header class="container-fluid">
    ...
</header>
<nav class="navbar navbar-default navbar-static-top" role="navigation">
    ...
</nav>

使用Javascript:

$('nav').affix({
      offset: {
        top: $('header').height()
      }
});

设置padding-top为body等于您nav的高度,以便可以看到固定导航栏覆盖的内容.

$('nav').on('affix.bs.affix', function (){
     $('body').css('margin-top', $('nav').height());
});

$('nav').on('affix-top.bs.affix', function (){
     $('body').css('margin-top', 0);
});

为了nav在滚动时坚持上去,添加这一点CSS.

CSS:

.affix
{
    top: 0;
}