Question

我有以下情况：

在这个小提琴上，当用户开始滚动浏览所述导航栏时，我试图将位于大型超大屏幕下方的.navbar设置为固定导航栏。我尝试使用bootstrap的.navbar-fixed-top，但它将它发送回顶部。 position: fixed让导航栏变得神知道在哪里。

在试图将导航栏固定到该特定位置时，我可以想到这一切。这可以只用CSS完成吗？我开始认为可能需要一些jQuery。

任何帮助将不胜感激。

Answer 1

Bootstrap有Affix插件。 Bootstrap文档右侧的文档目录使用了它本身。

一个快速的谷歌搜索让我这个小提琴（我没有写这个，归功于谁做过）：http://jsfiddle.net/skelly/df8tb/

HTML：

 <div class="container" id="con">
        <div class="row">
            <div class="span12">
                <div class="well">
                    <h1> Header </h1>               
                </div>
            </div>
        </div>
    </div>
    <div class="container" data-spy="affix" data-offset-top="400" id="nav">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <div class="span12">
                        <a class="brand" href="#">Home</a>
                         <ul class="nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Link</a></li>
                            <li><a href="#">Link</a></li>
                         </ul>
                    </div>
                </div> 
            </div> 
        </div> 
    </div>
    <div class="container">
        <div class="span3">
            <p style="height:1000px;padding:10px;">

                Long scrolling text here... Ovi lispmd idr. Blah goo bar foor foo.  Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo. Ovi lispmd idr. Blah goo bar foor foo.

            </p>
        </div>
    </div>

JS：

$('#nav').affix({
});

Answer 2

据我了解使用名为 Sticky

的jquery插件

你可以找到它here

您可以使用此代码

$(document).ready(function(){
    $("#stick").sticky({topSpacing:20});
  });

如果需要，只需更改间距。

我还为此创建了fiddle。

Answer 3

我不知道jquery，但我相信这就是你要找的东西：http://getbootstrap.com/javascript/#scrollspy。我已经使用bootstrap做了一些Ruby On Rails，所以这就是我来自的地方。

编辑：不需要额外的jQuery！ Bootstrap很酷，可以做这样的事情。

将导航栏固定在bootstrap上的特定位置

3 个答案: