Question

这里全新，只是想知道是否有人能够回答我的问题。

所以这是我试图实现的导航栏效果的一个例子： http://www.autotrader.co.uk/

我知道bootstrap带有.navbar-fixed-top类但是我似乎无法找到任何人撤销www.autotrader.co.uk所具有的功能。例如，如果向下滚动页面，则会跟随导航。

我可以使用自定义CSS＆amp;然而，当我这样做时，我遇到了网格问题。

滚动时是否有一种方法可以在bootstrap中实现粘性效果？我只能找到将导航固定到视口顶部的解决方案。我还可以问......如果我在引导容器外部开发会导致任何问题吗？我以为我可以在容器外部开发，只是媒体查询导航？

任何提示将不胜感激，谢谢：）

Answer 1

这是加入方式。

DEMO

我添加了一点css来淡出/淡出导航栏品牌。如果您希望在页面顶部放置徽标，然后在导航栏修复后将其添加到导航栏，这会产生很好的效果。

<强> CSS：

.brand {
    font-size: 2em;
    color: #ff0066;
    margin: 50px 0 25px;
}
.navbar-brand {
    opacity: 0;
    -o-transition: opacity .5s linear;
    -webkit-transition: opacity .5s linear;
    transition: opacity .5s linear;
}
.navbar {
    border-radius: 0;
    border-left: none;
    border-right: none;
}
nav.affix {
    top: 0;
    width: 100%;
    z-index: 1000;
}
nav.affix .navbar-brand {
    opacity: 1;
}

<强> HTML：

<div class="container">
    <div class="brand"><i class="glyphicon glyphicon-heart"></i> hearthealth.org</div>
</div>
<nav class="navbar navbar-default affix-top" data-spy="affix" data-offset-top="80" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-6">
              <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="#"><i class="glyphicon glyphicon-heart"></i> hearthealth.org</a>
        </div>
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="#">Home</a>
                </li>
                <li><a href="#">Link</a>
                </li>
                <li><a href="#">Link</a>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>
</nav>
<div class="container">
    <div class="col-xs-12">
         <h2>some lorem ipsum for scrolling:</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p> 

<!-- Add enough text to be able to scroll -->

    </div>
</div>

作为替代方案，您可以使用jQuery添加/删除.navbar-fixed-top类。这是一个例子（demo here）：

<强> jQuery的：

$(window).scroll(function() {  
    var scrollpos = $(window).scrollTop();
    if (scrollpos > 80) {
        $('.navbar').addClass('navbar-fixed-top');
    } else {
        $('.navbar').removeClass('navbar-fixed-top');

    }
});

自定义引导程序导航栏

1 个答案:

DEMO