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/。

关键是使用$（window）.scroll（）作为jQuery的环绕。然后使用$（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

您可以使用引导程序中使用的Affix组件。这是工作的jsfiddle。 http://jsfiddle.net/xpzy2ko5/

JavaScript：

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

CSS：

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

Bootstrap固定导航栏

3 个答案: