Bootstrap固定导航栏

Question

我目前正在用Bootstrap建立一个网站，我想知道如果有一个固定的导航栏是可能的。我希望在导航栏上有内容(图片或文本)，但当你向下滚动页面时，导航栏将粘在顶部而没有内容。你有什么建议吗？

Answer 1

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

​

http://getbootstrap.com/components/#navbar

Answer 2

你可以用一些简单的jQuery来做这件事。这是一个有效的http://jsfiddle.net/pqLen8p0/3/示例。

关键是使用$( jQuery ).scroll()作为窗口的包装。然后使用$( window ).scrollTop()查找您的窗口滚动位置。

$(window).scroll(function(){
var nav = $('.nav');
var height = $(window).scrollTop();
if (height > 100) {
    if (!nav.hasClass('fixed')) {
        nav.addClass('fixed');
    }
} else {
    if (nav.hasClass('fixed')) {
        nav.removeClass('fixed');
    }
  }
});

Answer 3

您可以使用bootstrap中使用的附加组件。下面是jsfiddle的工作原理。http://jsfiddle.net/xpzy2ko5/

JavaScript：

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

CSS：

.navbar.affix {
    top : 0;
    width: 100%;
    z-index: 2; }