如何Bootstrap导航栏静态到固定滚动？ [英] How to Bootstrap navbar static to fixed on scroll?

问题描述

有任何方法可以使用bootstrap 3 css或者javascript？

解决方案

如果我没有错，你想要实现的就是Sticky navbar。

有几行jQuery和滚动事件很容易实现：

  $（document）.ready（function（）{
 
 var menu = $（'menu'）; 
 var origOffsetY = menu.offset 
 
 function scroll（）{
 if（$（window）.scrollTop（）> = origOffsetY）{
 $（'menu'）。addClass ）; 
 $（'。content'）。addClass（'menu-padding'）; 
} else {
 $（'menu'）。removeClass（'sticky'）; 
 $（'。content'）。removeClass（'menu-padding'）; 
} 
 
 
} 
 
 document.onscroll = scroll; 
 
}）; 
  

我已经为你做了一个快速的工作示例，希望它有帮助：
http://jsfiddle.net/yeco/4EcFf/

要使它使用 Bootstrap 工作，只需要在jsfiddle中添加或删除navbar-fixed-top而不是sticky类。

I would to make static navbar to fixed navbar on scroll, when it reached top of the page.

is there any way to get it using bootstrap 3 css or javascript?

解决方案

If I'm not wrong, what you're trying to achieve is called Sticky navbar.

With a few lines of jQuery and the scroll event is pretty easy to achieve:

$(document).ready(function () {

var menu = $('.menu');
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.onscroll = scroll;

});

I've done a quick working sample for you, hope it helps: http://jsfiddle.net/yeco/4EcFf/

To make it work with Bootstrap you only need to add or remove "navbar-fixed-top" instead of the "sticky" class in the jsfiddle .

这篇关于如何Bootstrap导航栏静态到固定滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！