blocks|key|3912667|text|我很确定，这是你所期待的。看看这把小提琴，这可能会对你有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3912668|http://jsfiddle.net/JK52L/8/|offset|length|3912669|你的超文本标记语言应该有navbar-fixed-top或navbar-fixed-bottom类。|style|CODE|3912670|HTML|BOLD|3912671|<nav+class="navbar+navbar-default+navbar-fixed-top"+role="navigation">
++
++<div+class="navbar-header">
++++<button+type="button"+class="navbar-toggle"+data-toggle="collapse"+data-target="#bs-example-navbar-collapse-1">
++++++<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="#">Brand</a>
++</div>

++
++<div+class="collapse+navbar-collapse"+id="bs-example-navbar-collapse-1">
++++<ul+class="nav+navbar-nav">
++++++<li+class="active"><a+href="#">Link+1</a></li>
++++++<li><a+href="#">Link+2</a></li>
++++</ul>
++</div>
</nav>|code-block|syntax|javascript|3912672|JS|3912673|$(document).scroll(function(e){
++++var+scrollTop+=+$(document).scrollTop();
++++if(scrollTop+>+0){
++++++++console.log(scrollTop);
++++++++$('.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top');
++++}+else+{
++++++++$('.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top');
++++}
});|3912674|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|S|0|0|C|G|T|J|0|0|4|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|F|3|G|5|6|7|17|8|@$D|18|E|19|H|I]|$D|1A|E|1B|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1C|8|@$D|1D|E|1E|H|L]]|9|@]|A|$]]|$1|M|3|N|5|O|7|1F|8|@]|9|@]|A|$P|Q]]|$1|R|3|S|5|6|7|1G|8|@$D|1H|E|1I|H|L]]|9|@]|A|$]]|$1|T|3|U|5|O|7|1J|8|@]|9|@]|A|$P|Q]]|$1|V|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|W|$X|$5|Y|Z|10|A|$11|C]]]]

<p>I am note sure, what you are expecting. Have a look at this fiddle, this might help you.</p>

<p><a href="http://jsfiddle.net/JK52L/8/">http://jsfiddle.net/JK52L/8/</a></p>

<p>You HTML should have the class <code>navbar-fixed-top</code> or <code>navbar-fixed-bottom</code>.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;nav class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
  &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
  &lt;div class="navbar-header"&gt;
    &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
      &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;span class="icon-bar"&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;a class="navbar-brand" href="#"&gt;Brand&lt;/a&gt;
  &lt;/div&gt;

  &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
    &lt;ul class="nav navbar-nav"&gt;
      &lt;li class="active"&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Link 2&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
&lt;/nav&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>$(document).scroll(function(e){
    var scrollTop = $(document).scrollTop();
    if(scrollTop &gt; 0){
        console.log(scrollTop);
        $('.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top');
    } else {
        $('.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top');
    }
});
</code></pre>


blocks|key|1519311|text|如果我没记错的话，你想要实现的东西叫做Sticky+navbar。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1519312|只需几行jQuery和scroll事件就可以很容易地实现：|1519313|$(document).ready(function()+{

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

});|code-block|syntax|javascript|1519314|我已经为您做了一个快速工作示例，希望它能对您有所帮助：http://jsfiddle.net/yeco/4EcFf/|offset|length|1519315|要使它与Bootstrap一起工作，您只需添加或删除“navbar-fixed+top”而不是jsfiddle中的“粘性”类。|style|BOLD|1519316|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/yeco/4EcFf/^0|0|0|0|R|V|0|0|4|9|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@$K|16|L|17|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

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

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

<pre><code>$(document).ready(function() {

    var menu = $('.menu');
    var content = $('.content');
    var origOffsetY = menu.offset().top;

    function scroll() {
        if ($(window).scrollTop() &gt;= origOffsetY) {
            menu.addClass('sticky');
            content.addClass('menu-padding');
        } else {
            menu.removeClass('sticky');
            content.removeClass('menu-padding');
        }
    }

    $(document).scroll();

});
</code></pre>

<p>I've done a quick working sample for you, hope it helps: 
<a href="http://jsfiddle.net/yeco/4EcFf/" rel="noreferrer">http://jsfiddle.net/yeco/4EcFf/</a></p>

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


blocks|key|5330644|text|使用Bootstrap附带的affix组件。从'navbar-static-top‘开始，当达到标题的高度(导航栏上的内容)时，它将更改为fixed……|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|5330645|$('#nav').affix({
++++++offset:+{
++++++++top:+$('header').height()
++++++}
});+|code-block|syntax|javascript|5330646|http://bootply.com/107973|5330647|entityMap|0|LINK|mutability|MUTABLE|url^0|E|5|1X|5|0|0|0|P|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Y|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|M|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|L]]]]

<p>Use the <code>affix</code> component included with Bootstrap. Start with a 'navbar-static-top' and this will change it to <code>fixed</code> when the height of your header (content above the navbar) is reached...</p>

<pre><code>$('#nav').affix({
      offset: {
        top: $('header').height()
      }
}); 
</code></pre>

<p><a href="http://bootply.com/107973">http://bootply.com/107973</a></p>


blocks|key|1523913|text|我面临着同样的问题，但对我有效的解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1523914|HTML：|1523915|<header+class="container-fluid">
++++...
</header>
<nav+class="row">
++++<div+class="navbar+navbar-inverse+navbar-static-top">
++++++++...
++++</div>
</nav>|code-block|syntax|javascript|1523916|JavaScript:|offset|length|style|BOLD|1523917|document.onscroll+=+function()+{
++++if(+$(window).scrollTop()+>+$('header').height()+)+{
++++++++$('nav+>+div.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top');
++++}
++++else+{
++++++++$('nav+>+div.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top');
++++}
};|1523918|其中header是导航栏上方的横幅标记|CODE|1523919|entityMap^0|0|0|0|0|B|0|0|2|6|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|Y|8|@$K|Z|L|10|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|12|8|@$K|13|L|14|M|S]]|9|@]|A|$]]|$1|T|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|U|$]]

<p>I faced the same problem but the solution that worked for me was:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;header class="container-fluid"&gt;
    ...
&lt;/header&gt;
&lt;nav class="row"&gt;
    &lt;div class="navbar navbar-inverse navbar-static-top"&gt;
        ...
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p><strong>JavaScript:</strong></p>

<pre><code>document.onscroll = function() {
    if( $(window).scrollTop() &gt; $('header').height() ) {
        $('nav &gt; div.navbar').removeClass('navbar-static-top').addClass('navbar-fixed-top');
    }
    else {
        $('nav &gt; div.navbar').removeClass('navbar-fixed-top').addClass('navbar-static-top');
    }
};
</code></pre>

<p>Where <code>header</code> was the banner tag above my navigation bar</p>


blocks|key|5330712|text|这里有一个使用Bootstrap的附加插件的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5330713|HTML：|5330714|<header+class="container-fluid">
++++...
</header>
<nav+class="navbar+navbar-default+navbar-static-top"+role="navigation">
++++...
</nav>|code-block|syntax|javascript|5330715|Javascript:|offset|length|style|BOLD|5330716|$('nav').affix({
++++++offset:+{
++++++++top:+$('header').height()
++++++}
});|5330717|将padding-top设置为与nav高度相等的body，以便固定导航栏覆盖的内容可见。|CODE|5330718|$('nav').on('affix.bs.affix',+function+(){
+++++$('body').css('margin-top',+$('nav').height());
});

$('nav').on('affix-top.bs.affix',+function+(){
+++++$('body').css('margin-top',+0);
});|5330719|要让nav在滚动时停留在顶部，请添加这一小段CSS。|5330720|CSS:|5330721|.affix
{
++++top:+0;
}|5330722|entityMap^0|0|0|0|0|B|0|0|1|B|G|3|O|4|0|0|2|3|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|16|8|@$K|17|L|18|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1A|8|@$K|1B|L|1C|M|S]|$K|1D|L|1E|M|S]|$K|1F|L|1G|M|S]]|9|@]|A|$]]|$1|T|3|U|5|F|7|1H|8|@]|9|@]|A|$G|H]]|$1|V|3|W|5|6|7|1I|8|@$K|1J|L|1K|M|S]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1L|8|@$K|1M|L|1N|M|N]]|9|@]|A|$]]|$1|Z|3|10|5|F|7|1O|8|@]|9|@]|A|$G|H]]|$1|11|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|12|$]]

<p>Here's a solution using Bootstrap's affix plugin:</p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;header class="container-fluid"&gt;
    ...
&lt;/header&gt;
&lt;nav class="navbar navbar-default navbar-static-top" role="navigation"&gt;
    ...
&lt;/nav&gt;
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code>$('nav').affix({
      offset: {
        top: $('header').height()
      }
});
</code></pre>

<p>Set <code>padding-top</code> to your <code>body</code> equal to that of your <code>nav</code>'s height so that the content overlayed by the fixed navbar is visible.</p>

<pre><code>$('nav').on('affix.bs.affix', function (){
     $('body').css('margin-top', $('nav').height());
});

$('nav').on('affix-top.bs.affix', function (){
     $('body').css('margin-top', 0);
});
</code></pre>

<p>To get the <code>nav</code> to stick on top while scrolling add this bit of CSS.</p>

<p><strong>CSS:</strong></p>

<pre><code>.affix
{
    top: 0;
}
</code></pre>


blocks|key|3912845|text|在导航上设置|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3912846|style="position:fixed;+width:100%25;"|code-block|syntax|javascript|3912847|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Set on nav</p>

<pre><code>style="position:fixed; width:100%;"
</code></pre>


blocks|key|1519355|text|根据需要设置max-height：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1519356|.navbar-fixed-top+
.navbar-collapse,+
.navbar-fixed-bottom+
.navbar-collapse+{
++++max-height:+700px;
}|code-block|syntax|javascript|1519357|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>set max-height as you need:</p>

<pre><code>.navbar-fixed-top 
.navbar-collapse, 
.navbar-fixed-bottom 
.navbar-collapse {
    max-height: 700px;
}
</code></pre>


blocks|key|3912872|text|嘿，所有人都在想这件事，你需要做的就是把导航包起来，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3912873|csscode：|3912874|#navwrap+{++
++++height:+100px;+++(change+dependant+on+hight+of+nav)
++++width:+100%25;
++++margin:+0;
++++padding-top:+5px;
}|code-block|syntax|javascript|3912875|HTML：|3912876|<div+id="navwrap">
++++nav+code+inside
</div>|3912877|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>hey all everyone is over thinking this all you need to do is wrap the nav in a  like below:</p>

<p>csscode:</p>

<pre><code>#navwrap {  
    height: 100px;   (change dependant on hight of nav)
    width: 100%;
    margin: 0;
    padding-top: 5px;
}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;div id="navwrap"&gt;
    nav code inside
&lt;/div&gt;
</code></pre>


blocks|key|3912897|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3912898|，或者您可以使用类名更改特定div的位置|blockquote|offset|length|style|CODE|3912899|3912900|3912901|$(document).scroll(function(e){
++++var+scrollTop+=+$(document).scrollTop();
++++if(scrollTop+>+0){
++++++++//console.log(scrollTop);
++++++++$('.header').css("position","fixed");
++++}+else+{
+++++++++$('.header').css("position","relative");
++++}
});|code-block|syntax|javascript|3912902|entityMap^0|0|E|3|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|Q|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|R|7|@$D|S|E|T|F|G]]|8|@]|9|$]]|$1|H|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|I|3|-4|4|5|6|V|7|@]|8|@]|9|$]]|$1|J|3|K|4|L|6|W|7|@]|8|@]|9|$M|N]]|$1|O|3|-4|4|5|6|X|7|@]|8|@]|9|$]]]|P|$]]

<blockquote>
  <p>Or you can change position of specific <code>div</code> using class name</p>
</blockquote>

<pre><code>$(document).scroll(function(e){
    var scrollTop = $(document).scrollTop();
    if(scrollTop &gt; 0){
        //console.log(scrollTop);
        $('.header').css("position","fixed");
    } else {
         $('.header').css("position","relative");
    }
});
</code></pre>


blocks|key|3912955|text|下面是我使用Affix插件http://getbootstrap.com/javascript/#affix的实现|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3912956|它包括一些额外解决的词缀问题(见下文)。|3912957|HTML：|3912958|<nav+class="navbar+navbar-inverse+navbar-fixed-top"+id="top_navbar">
++<div+class="container-fluid">
...+(typical+Bootstrap+top+navbar)
++</div>
</div>

...
...
...

<div+id="parent-navbar-main"+>
++<div+id="navbar-main">
...+(here+is+your+nav+panel+to+get+sticky+on+scroll)
++</div>
</div>|code-block|syntax|javascript|3912959|Javascript:|style|BOLD|3912960|function+set_sticky_panel()++{

++var+affixElement+=+$('#navbar-main');

++var+navbarElementHeight+=+$('#top_navbar').height();

//+http://stackoverflow.com/questions/18683303/bootstrap-3-0-affix-with-list-changes-width
++var+width+=+affixElement.parent().width();
++affixElement.width(width);

//+http://stackoverflow.com/questions/3410765/get-full-height-of-element
++var+affixElementHeight+=+$('#navbar-main').outerHeight(true);

//+https://finiteheap.com/webdev/2014/12/26/bootstrap-affix-flickering.html++
++affixElement.parent().height(affixElementHeight);

//+http://stackoverflow.com/questions/23797241/resetting-changing-the-offset-of-bootstrap-affix
++$(window).off('.affix')
++affixElement.removeData('bs.affix').removeClass('affix+affix-top+affix-bottom')


++affixElement.affix({
++++offset:+{
++++//+Distance+of+between+element+and+top+page
++++++top:+function+()+{
++++++//+how+much+scrolling+is+done+until+sticking+the+panel
++++++++return+(this.top+=+affixElement.offset().top+-+parseInt(navbarElementHeight,10))
++++++}
++++}
++});

++//+The+replacement+for+the+css-file.
++affixElement.on('affix.bs.affix',+function+(){
++//+the+absolute+position+where+the+sticked+panel+is+to+be+placed+when+the+fixing+event+fires+(e.g.+the+panel+reached+the+top+of+the+page).
++++affixElement.css('top',+navbarElementHeight+%2B+'px');
++++affixElement.css('z-index',+10);
++});

}

$(document).on('ready',+set_sticky_panel);

$(window).resize(set_sticky_panel);|3912961|CSS:|3912962|3912963|不需要css。|blockquote|3912964|3912965|3912966|如果与standart实现相比，我的代码额外解决了这些问题：|3912967|3912968|粘性面板的宽度在修复事件时不再中断。|ordered-list-item|3912969|CSS文件使用中的需求是更改窗口更改大小事件(响应性)上的粘性面板大小现在已完成。|3912970|不再在修复事件中附加闪烁/跳跃。|3912971|3912972|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/javascript/#affix^0|D|15|0|0|0|0|0|0|B|0|0|0|4|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]]|C|$]]|$1|D|3|E|5|6|7|1N|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1O|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1P|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1Q|8|@$A|1R|B|1S|O|P]]|9|@]|C|$]]|$1|Q|3|R|5|J|7|1T|8|@]|9|@]|C|$K|L]]|$1|S|3|T|5|6|7|1U|8|@$A|1V|B|1W|O|P]]|9|@]|C|$]]|$1|U|3|-4|5|6|7|1X|8|@]|9|@]|C|$]]|$1|V|3|W|5|X|7|1Y|8|@]|9|@]|C|$]]|$1|Y|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|20|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|21|8|@]|9|@]|C|$]]|$1|12|3|-4|5|6|7|22|8|@]|9|@]|C|$]]|$1|13|3|14|5|15|7|23|8|@]|9|@]|C|$]]|$1|16|3|17|5|15|7|24|8|@]|9|@]|C|$]]|$1|18|3|19|5|15|7|25|8|@]|9|@]|C|$]]|$1|1A|3|-4|5|6|7|26|8|@]|9|@]|C|$]]|$1|1B|3|-4|5|6|7|27|8|@]|9|@]|C|$]]]|1C|$1D|$5|1E|1F|1G|C|$1H|1I]]]]

<p>Here is my implementation using the Affix Bootstrap plugin <a href="http://getbootstrap.com/javascript/#affix" rel="nofollow">http://getbootstrap.com/javascript/#affix</a></p>

<p>It includes some extra affix problems solved (see below). </p>

<p><strong>HTML:</strong></p>

<pre><code>&lt;nav class="navbar navbar-inverse navbar-fixed-top" id="top_navbar"&gt;
  &lt;div class="container-fluid"&gt;
... (typical Bootstrap top navbar)
  &lt;/div&gt;
&lt;/div&gt;

...
...
...

&lt;div id="parent-navbar-main" &gt;
  &lt;div id="navbar-main"&gt;
... (here is your nav panel to get sticky on scroll)
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p><strong>Javascript:</strong></p>

<pre><code>function set_sticky_panel()  {

  var affixElement = $('#navbar-main');

  var navbarElementHeight = $('#top_navbar').height();

// http://stackoverflow.com/questions/18683303/bootstrap-3-0-affix-with-list-changes-width
  var width = affixElement.parent().width();
  affixElement.width(width);

// http://stackoverflow.com/questions/3410765/get-full-height-of-element
  var affixElementHeight = $('#navbar-main').outerHeight(true);

// https://finiteheap.com/webdev/2014/12/26/bootstrap-affix-flickering.html  
  affixElement.parent().height(affixElementHeight);

// http://stackoverflow.com/questions/23797241/resetting-changing-the-offset-of-bootstrap-affix
  $(window).off('.affix')
  affixElement.removeData('bs.affix').removeClass('affix affix-top affix-bottom')


  affixElement.affix({
    offset: {
    // Distance of between element and top page
      top: function () {
      // how much scrolling is done until sticking the panel
        return (this.top = affixElement.offset().top - parseInt(navbarElementHeight,10))
      }
    }
  });

  // The replacement for the css-file.
  affixElement.on('affix.bs.affix', function (){
  // the absolute position where the sticked panel is to be placed when the fixing event fires (e.g. the panel reached the top of the page).
    affixElement.css('top', navbarElementHeight + 'px');
    affixElement.css('z-index', 10);
  });

}

$(document).on('ready', set_sticky_panel);

$(window).resize(set_sticky_panel);
</code></pre>

<p><strong>CSS:</strong></p>

<blockquote>
  <p>No css is required.</p>
</blockquote>

<p>If to compare with the standart implementation my code additionaly solves these problems:</p>

<ol>
<li>The width of the sticky panel does not break at the fixing event anymore.</li>
<li>The need in the CSS-file usage is eliminated.</li>
<li>Reformatting the sticky panel size on the window change size event (responsiveness) is done now.</li>
<li>No more affix flittering / jumping at the fixing event.</li>
</ol>


blocks|key|5330898|text|如果您像这样处理代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5330899|<div+class="scroll">+
<div+class="menu">home+%7C+services+%7C+contact</div>
</div>|code-block|syntax|javascript|5330900|和css：|5330901|.scroll+{
++margin-bottom:50px;
}
.menu+{
++position:absolute;
++background:#428bca;
++color:#fff;
++line-height:30px;
++letter-spacing:1px;
++width:100%25;
++height:50px;
}
.menu-padding+{
++//+no++style+here+anymore+
}|5330902|然后恼人的卷轴就消失了。|5330903|完整的代码和小提琴不是我最初做的，我是从这个主题的早期答案中得到的。代码中的更改是由我做出的|5330904|Fabian+#Web-Stars|5330905|jsfiddle|offset|length|5330906|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4EcFf/1183/^0|0|0|0|0|0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|19|8|@]|9|@$S|1A|T|1B|1|1C]]|A|$]]|$1|U|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11]]]]

<p>If you handle the code like this: </p>

<pre><code>&lt;div class="scroll"&gt; 
&lt;div class="menu"&gt;home | services | contact&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And css: </p>

<pre><code>.scroll {
  margin-bottom:50px;
}
.menu {
  position:absolute;
  background:#428bca;
  color:#fff;
  line-height:30px;
  letter-spacing:1px;
  width:100%;
  height:50px;
}
.menu-padding {
  // no  style here anymore 
}
</code></pre>

<p>Then the annoying scroll is gone. </p>

<p>The compleet code and fiddle is not originally made by me, I got it from an earlier answer in this topic. The change in the code is made by me</p>

<p>Fabian #Web-Stars</p>

<p><a href="http://jsfiddle.net/4EcFf/1183/" rel="nofollow noreferrer">jsfiddle</a></p>


blocks|key|3913047|text|/**+*滚动管理*/+$(文档).ready(function+()+{|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3913048|//+Define+the+menu+we+are+working+with
var+menu+=+$('.navbar.navbar-default.navbar-inverse');

//+Get+the+menus+current+offset
var+origOffsetY+=+menu.offset().top;

/**
+*+scroll
+*+Perform+our+menu+mod
+*/
function+scroll()+{

++++//+Check+the+menus+offset.+
++++if+($(window).scrollTop()+>=+origOffsetY)+{

++++++++//If+it+is+indeed+beyond+the+offset,+affix+it+to+the+top.
++++++++$(menu).addClass('navbar-fixed-top');

++++}+else+{

++++++++//+Otherwise,+un+affix+it.
++++++++$(menu).removeClass('navbar-fixed-top');

++++}
}

//+Anytime+the+document+is+scrolled+act+on+it
document.onscroll+=+scroll;|code-block|syntax|javascript|3913049|})；|3913050|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>/**
 * Scroll management
 */
$(document).ready(function () {</p>

<pre><code>// Define the menu we are working with
var menu = $('.navbar.navbar-default.navbar-inverse');

// Get the menus current offset
var origOffsetY = menu.offset().top;

/**
 * scroll
 * Perform our menu mod
 */
function scroll() {

    // Check the menus offset. 
    if ($(window).scrollTop() &gt;= origOffsetY) {

        //If it is indeed beyond the offset, affix it to the top.
        $(menu).addClass('navbar-fixed-top');

    } else {

        // Otherwise, un affix it.
        $(menu).removeClass('navbar-fixed-top');

    }
}

// Anytime the document is scrolled act on it
document.onscroll = scroll;
</code></pre>

<p>});</p>


blocks|key|3913057|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3913058|/**
+*+Scroll+management
+*/
$(document).ready(function+()+{

++++//+Define+the+menu+we+are+working+with
++++var+menu+=+$('.navbar.navbar-default.navbar-inverse');

++++//+Get+the+menus+current+offset
++++var+origOffsetY+=+menu.offset().top;

++++/**
+++++*+scroll
+++++*+Perform+our+menu+mod
+++++*/
++++function+scroll()+{

++++++++//+Check+the+menus+offset.+
++++++++if+($(window).scrollTop()+>=+origOffsetY)+{

++++++++++++//If+it+is+indeed+beyond+the+offset,+affix+it+to+the+top.
++++++++++++$(menu).addClass('navbar-fixed-top');

++++++++}+else+{

++++++++++++//+Otherwise,+un+affix+it.
++++++++++++$(menu).removeClass('navbar-fixed-top');

++++++++}
++++}

++++//+Anytime+the+document+is+scrolled+act+on+it
++++document.onscroll+=+scroll;

});|code-block|syntax|javascript|3913059|.navbar-wrapper{
++++background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/10/21/20181/cad2441dd3252cf53f12154412286ba0.jpg');
++++height:+100vh;
++padding-top:+50px;
}

h1{
++font-size:+50px;
++font-weight:+700;
}

#login-dp{
++++min-width:+250px;
++++padding:+14px+14px+0;
++++overflow:hidden;
++++background-color:rgba(255,255,255,.8);
}
#login-dp+.help-block{
++++font-size:12px++++
}
#login-dp+.bottom{
++++background-color:rgba(255,255,255,.8);
++++border-top:1px+solid+#ddd;
++++clear:both;
++++padding:14px;
}
#login-dp+.social-buttons{
++++margin:12px+0++++
}
#login-dp+.social-buttons+a{
++++width:+49%25;
}
#login-dp+.form-group+{
++++margin-bottom:+10px;
}
.btn-fb{
++++color:+#fff;
++++background-color:#3b5998;
}
.btn-fb:hover{
++++color:+#fff;
++++background-color:#496ebc+
}
.btn-tw{
++++color:+#fff;
++++background-color:#55acee;
}
.btn-tw:hover{
++++color:+#fff;
++++background-color:#59b5fa;
}
@media(max-width:768px){
++++#login-dp{
++++++++background-color:+inherit;
++++++++color:+#fff;
++++}
++++#login-dp+.bottom{
++++++++background-color:+inherit;
++++++++border-top:0+none;
++++}
}|3913060|<script+src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link+href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"+rel="stylesheet">

<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"+integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va%2BPmSTsz/K68vbdEjh4u"+crossorigin="anonymous">

<body>
<div+class="navbar-wrapper">++
++<div+class="container">
++++<nav+class="navbar+navbar-default+navbar-inverse"+role="navigation">
++
++++
++++<div+class="navbar-header">
++++++<button+type="button"+class="navbar-toggle+collapsed"+data-toggle="collapse"+data-target="#bs-example-navbar-collapse-1">
++++++++<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="#">Login+dropdown</a>
++++</div>

++++
++++<div+class="collapse+navbar-collapse"+id="bs-example-navbar-collapse-1">
++++++++<ul+class="nav+navbar-nav">
++++++++++<li+class="active"><a+href="#">Link</a></li>
++++++++++<li><a+href="#">Link</a></li>
++++++++++<li+class="dropdown">
++++++++++++<a+href="#"+class="dropdown-toggle"+data-toggle="dropdown">Dropdown+<span+class="caret"></span></a>
++++++++++++<ul+class="dropdown-menu"+role="menu">
++++++++++++++<li><a+href="#">Action</a></li>
++++++++++++++<li><a+href="#">Another+action</a></li>
++++++++++++++<li><a+href="#">Something+else+here</a></li>
++++++++++++++<li+class="divider"></li>
++++++++++++++<li><a+href="#">Separated+link</a></li>
++++++++++++++<li+class="divider"></li>
++++++++++++++<li><a+href="#">One+more+separated+link</a></li>
++++++++++++</ul>
++++++++++</li>
++++++++</ul>
++++++
++++++</div>
++++</nav>
++</div>
</div>
++
+<section>
+++<div+class="container">
+++++<div+class="row">
+++++++<h1>Content</h1>
+++++++<p>
+++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Morbi+congue+luctus+placerat.+Sed+nisl+sem,+pellentesque+at+risus+eget,+consequat+bibendum+velit.+Sed+interdum+accumsan+luctus.+Duis+rhoncus+suscipit+hendrerit.+Vestibulum+ut+lobortis+diam.+Donec+magna+est,+euismod+non+ligula+in,+congue+aliquet+diam.+Sed+pellentesque+erat+nibh,+et+blandit+quam+auctor+eget.+Integer+fringilla+turpis+ac+sagittis+mattis.+In+in+metus+posuere,+tincidunt+orci+non,+lobortis+ipsum.+Praesent+porttitor+orci+a+ligula+facilisis+porta.+Nullam+tincidunt+feugiat+dignissim.
+++++++</p>
+++++++<p>
+++++++++Pellentesque+cursus+suscipit+massa+ut+molestie.+Duis+malesuada+consequat+venenatis.+Vestibulum+accumsan+lorem+sit+amet+vehicula+tristique.+Donec+nec+mauris+quis+mi+imperdiet+vestibulum.+Praesent+tempor+velit+at+posuere+posuere.+Mauris+tellus+diam,+dictum+sed+molestie+eu,+lobortis+nec+diam.+Mauris+molestie+nulla+vulputate,+lobortis+urna+eget,+gravida+erat.+Phasellus+in+ullamcorper+lacus,+eget+ullamcorper+odio.
+++++++</p>
+++++++<p>
+++++++++Quisque+gravida+nulla+eros.+Duis+sit+amet+rhoncus+felis.+Etiam+in+malesuada+nisl.+Proin+sit+amet+elit+sit+amet+erat+dapibus+pretium.+Duis+a+dignissim+lacus,+vitae+mollis+nunc.+Donec+ut+tempor+magna.+Maecenas+eget+felis+eget+ipsum+porttitor+dapibus+vitae+vitae+magna.+Cras+et+felis+eros.+Nam+dolor+odio,+bibendum+ut+ex+eu,+facilisis+suscipit+ipsum.+Aliquam+sit+amet+nunc+volutpat,+aliquet+nunc+ut,+tempor+augue.+Pellentesque+semper+vestibulum+lacinia.+Nam+lacinia+erat+interdum+purus+consequat+elementum.+Phasellus+volutpat+sed+libero+id+molestie.+Quisque+nec+iaculis+nisl,+vitae+accumsan+justo.+Suspendisse+sollicitudin+metus+in+libero+cursus+tempor+in+eget+enim.
+++++++</p>
+++++++<p>
+++++++++Suspendisse+nibh+lacus,+consequat+et+tincidunt+eget,+interdum+mollis+velit.+Etiam+lobortis+ac+tellus+et+pretium.+Nunc+a+tincidunt+nulla.+Cras+vel+nulla+in+neque+accumsan+fermentum.+Etiam+ac+erat+leo.+Vestibulum+aliquam+dignissim+lectus,+tincidunt+consequat+augue+malesuada+at.+Pellentesque+semper+viverra+elit+quis+vestibulum.+Aliquam+rutrum+justo+dignissim+ligula+fringilla,+ac+viverra+metus+efficitur.
+++++++</p>
+++++++<p>
+++++++++Mauris+quis+nisi+convallis,+rhoncus+odio+non,+sodales+urna.+Donec+ac+ante+at+nisi+pulvinar+eleifend.+Duis+vel+suscipit+est.+Nullam+quis+aliquet+eros.+Maecenas+tincidunt+augue+condimentum+nisi+pharetra,+in+molestie+libero+condimentum.+In+hac+habitasse+platea+dictumst.+Morbi+quis+elit+id+nunc+faucibus+egestas.+Sed+non+vehicula+ligula,+quis+viverra+urna.+Nunc+nec+eleifend+elit.+Sed+aliquam+nibh+non+turpis+congue,+a+condimentum+mauris+dictum.+Vivamus+laoreet+nulla+vel+elit+consequat,+non+convallis+nibh+dapibus.+Mauris+maximus+nibh+maximus,+sollicitudin+odio+nec,+semper+nunc.+Nunc+consequat+convallis+lobortis.+Aliquam+pulvinar+porttitor+lorem.+Donec+luctus,+libero+a+interdum+posuere,+est+tellus+tincidunt+risus,+a+fermentum+lacus+odio+at+metus.+Donec+maximus+ante+massa,+imperdiet+consequat+magna+lobortis+sed.
+++++++</p>
+++++</div>
+++</div>
+</section>


</body>|3913061|3913062|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>/**
 * Scroll management
 */
$(document).ready(function () {

    // Define the menu we are working with
    var menu = $('.navbar.navbar-default.navbar-inverse');

    // Get the menus current offset
    var origOffsetY = menu.offset().top;

    /**
     * scroll
     * Perform our menu mod
     */
    function scroll() {

        // Check the menus offset. 
        if ($(window).scrollTop() &gt;= origOffsetY) {

            //If it is indeed beyond the offset, affix it to the top.
            $(menu).addClass('navbar-fixed-top');

        } else {

            // Otherwise, un affix it.
            $(menu).removeClass('navbar-fixed-top');

        }
    }

    // Anytime the document is scrolled act on it
    document.onscroll = scroll;

});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.navbar-wrapper{
    background:url('http://www.wallpaperup.com/uploads/wallpapers/2012/10/21/20181/cad2441dd3252cf53f12154412286ba0.jpg');
    height: 100vh;
  padding-top: 50px;
}

h1{
  font-size: 50px;
  font-weight: 700;
}

#login-dp{
    min-width: 250px;
    padding: 14px 14px 0;
    overflow:hidden;
    background-color:rgba(255,255,255,.8);
}
#login-dp .help-block{
    font-size:12px    
}
#login-dp .bottom{
    background-color:rgba(255,255,255,.8);
    border-top:1px solid #ddd;
    clear:both;
    padding:14px;
}
#login-dp .social-buttons{
    margin:12px 0    
}
#login-dp .social-buttons a{
    width: 49%;
}
#login-dp .form-group {
    margin-bottom: 10px;
}
.btn-fb{
    color: #fff;
    background-color:#3b5998;
}
.btn-fb:hover{
    color: #fff;
    background-color:#496ebc 
}
.btn-tw{
    color: #fff;
    background-color:#55acee;
}
.btn-tw:hover{
    color: #fff;
    background-color:#59b5fa;
}
@media(max-width:768px){
    #login-dp{
        background-color: inherit;
        color: #fff;
    }
    #login-dp .bottom{
        background-color: inherit;
        border-top:0 none;
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"&gt;

&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;

&lt;body&gt;
&lt;div class="navbar-wrapper"&gt;  
  &lt;div class="container"&gt;
    &lt;nav class="navbar navbar-default navbar-inverse" role="navigation"&gt;
  
    &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
    &lt;div class="navbar-header"&gt;
      &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;a class="navbar-brand" href="#"&gt;Login dropdown&lt;/a&gt;
    &lt;/div&gt;

    &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
    &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
        &lt;ul class="nav navbar-nav"&gt;
          &lt;li class="active"&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;li class="dropdown"&gt;
            &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu" role="menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
              &lt;li class="divider"&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;One more separated link&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      
      &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
    &lt;/nav&gt;
  &lt;/div&gt;&lt;!-- container --&gt;
&lt;/div&gt;&lt;!-- /.navbar-wrapper --&gt;
  
 &lt;section&gt;
   &lt;div class="container"&gt;
     &lt;div class="row"&gt;
       &lt;h1&gt;Content&lt;/h1&gt;
       &lt;p&gt;
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi congue luctus placerat. Sed nisl sem, pellentesque at risus eget, consequat bibendum velit. Sed interdum accumsan luctus. Duis rhoncus suscipit hendrerit. Vestibulum ut lobortis diam. Donec magna est, euismod non ligula in, congue aliquet diam. Sed pellentesque erat nibh, et blandit quam auctor eget. Integer fringilla turpis ac sagittis mattis. In in metus posuere, tincidunt orci non, lobortis ipsum. Praesent porttitor orci a ligula facilisis porta. Nullam tincidunt feugiat dignissim.
       &lt;/p&gt;
       &lt;p&gt;
         Pellentesque cursus suscipit massa ut molestie. Duis malesuada consequat venenatis. Vestibulum accumsan lorem sit amet vehicula tristique. Donec nec mauris quis mi imperdiet vestibulum. Praesent tempor velit at posuere posuere. Mauris tellus diam, dictum sed molestie eu, lobortis nec diam. Mauris molestie nulla vulputate, lobortis urna eget, gravida erat. Phasellus in ullamcorper lacus, eget ullamcorper odio.
       &lt;/p&gt;
       &lt;p&gt;
         Quisque gravida nulla eros. Duis sit amet rhoncus felis. Etiam in malesuada nisl. Proin sit amet elit sit amet erat dapibus pretium. Duis a dignissim lacus, vitae mollis nunc. Donec ut tempor magna. Maecenas eget felis eget ipsum porttitor dapibus vitae vitae magna. Cras et felis eros. Nam dolor odio, bibendum ut ex eu, facilisis suscipit ipsum. Aliquam sit amet nunc volutpat, aliquet nunc ut, tempor augue. Pellentesque semper vestibulum lacinia. Nam lacinia erat interdum purus consequat elementum. Phasellus volutpat sed libero id molestie. Quisque nec iaculis nisl, vitae accumsan justo. Suspendisse sollicitudin metus in libero cursus tempor in eget enim.
       &lt;/p&gt;
       &lt;p&gt;
         Suspendisse nibh lacus, consequat et tincidunt eget, interdum mollis velit. Etiam lobortis ac tellus et pretium. Nunc a tincidunt nulla. Cras vel nulla in neque accumsan fermentum. Etiam ac erat leo. Vestibulum aliquam dignissim lectus, tincidunt consequat augue malesuada at. Pellentesque semper viverra elit quis vestibulum. Aliquam rutrum justo dignissim ligula fringilla, ac viverra metus efficitur.
       &lt;/p&gt;
       &lt;p&gt;
         Mauris quis nisi convallis, rhoncus odio non, sodales urna. Donec ac ante at nisi pulvinar eleifend. Duis vel suscipit est. Nullam quis aliquet eros. Maecenas tincidunt augue condimentum nisi pharetra, in molestie libero condimentum. In hac habitasse platea dictumst. Morbi quis elit id nunc faucibus egestas. Sed non vehicula ligula, quis viverra urna. Nunc nec eleifend elit. Sed aliquam nibh non turpis congue, a condimentum mauris dictum. Vivamus laoreet nulla vel elit consequat, non convallis nibh dapibus. Mauris maximus nibh maximus, sollicitudin odio nec, semper nunc. Nunc consequat convallis lobortis. Aliquam pulvinar porttitor lorem. Donec luctus, libero a interdum posuere, est tellus tincidunt risus, a fermentum lacus odio at metus. Donec maximus ante massa, imperdiet consequat magna lobortis sed.
       &lt;/p&gt;
     &lt;/div&gt;
   &lt;/div&gt;
 &lt;/section&gt;


&lt;/body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1519443|text|这个问题有点老了，它是由CSS和最新的bootstrap解决的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1519444|如果你将类sticky-top添加到你的导航栏中，它将会像当前最好的答案中的javascript/jquery一样工作，但是没有任何javascript。|offset|length|style|CODE|1519445|浏览器支持相当不错，但并不完美。|1519446|entityMap^0|0|5|A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>The question is a bit older, it's solved by CSS and latest bootstrap natively.  </p>

<p>If you add the class <code>sticky-top</code> to your navbar it will behave just like the javascript/jquery in the best current answer but without any javascript.<br>
Browser support is quite decent but not perfect.</p>


blocks|key|1802838|text|如果您使用的是Bootstrap+4，它是撰写此答案时的最新版本，那么测试已经有了一些变化。下面是一个固定在顶部的导航栏的示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1802839|<nav+class="navbar+fixed-top+navbar-light+bg-light">
++++<a+class="navbar-brand"+href="#"><h1>Navbar</h1></a>
</nav>|code-block|syntax|javascript|1802840|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you are using Bootstrap 4, which is the latest version as writing this answer, the assingments have changed a bit. Here is an example of a navbar fixed on top:</p>

<pre><code>&lt;nav class="navbar fixed-top navbar-light bg-light"&gt;
    &lt;a class="navbar-brand" href="#"&gt;&lt;h1&gt;Navbar&lt;/h1&gt;&lt;/a&gt;
&lt;/nav&gt;
</code></pre>


blocks|key|3913219|text|固定到顶级的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3913220|使bootstrap导航栏固定在滚动上|offset|length|style|BOLD|3913221|<nav+class="navbar+navbar-default+navbar-fixed-top">
++++<div+class="container">
++++++++++...
+++++</div>+
</nav>|code-block|syntax|javascript|3913222|entityMap^0|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p><strong>Fixed to top</strong></p>
<p>Make bootstrap navbar fixed on scroll</p>
<pre><code>&lt;nav class=&quot;navbar navbar-default navbar-fixed-top&quot;&gt;
    &lt;div class=&quot;container&quot;&gt;
          ...
     &lt;/div&gt; 
&lt;/nav&gt;
</code></pre>


<p>I would like to make static navbar to fixed navbar on scroll, when it reaches top of the page.</p>

<p>Is there a way to get it using bootstrap 3 css or javascript?</p>


How to Bootstrap navbar static to fixed on scroll?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我想使静态导航栏，以固定导航栏滚动，当它达到页面顶部。有没有办法使用bootstrap 3css或javascript获得它？

问如何将导航栏静态引导至固定滚动？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将导航栏静态引导至固定滚动？EN