引导静态到固定的navbar滚动 [英] bootstrap static to fixed navbar jumping on scroll

问题描述

有一点麻烦工作这一个。
当浏览器滚动到顶部的标志时，我有一个引导导航条从静态到固定。一切工作正常，除非当导航栏到达顶部，它跳下来丢失第一几行内容。谁能帮我解决这个问题？

html

 < div id =logo> 
< div class =container> 
< div class =row> 
< div class =col-md-12> 
< h1> BIG，< / h1> 
< h1> BIG LOGO！< / h1> 
< / div> 
< / div> 
< / div> 
< / div> 
 
< div id =nav-wrapper> 
< div id =navclass =navbar navbar-inverse navbar-static-top> 
< div class =container> 
< div class =navbar-header> 
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃navbararia-expanded =falsearia-controls =navbar ; 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brandhref =＃>专案名称< / a> 
< / div> 
< div id =navbarclass =collapse navbar-collapse> 
< ul class =nav navbar-nav> 
< li class =active>< a href =＃>首页< / a>< / li& 
< li>< a href =＃about>关于< / a>< / li& 
< li>< a href =＃contact>联系人< / a>< / li> 
< / ul> 
< / div><！ -  /。nav-collapse  - > 
< / div> 
< / nav> 
< / div> 
  

css

 ＃nav.affix {
 position：fixed; 
 top：0; 
 width：100％
} 
  

java

  $（function（）{
 $（'＃nav-wrapper'）。height（$（＃nav）。height ）; 
 
 $（'＃nav'）。affix（{
 offset：{top：$（'＃nav'）。offset（）。top} 
} ; 
}）; 
  

检查JSFIDDLE示例

感谢各位！

解决方案

pre> $（function（）{
$（'＃nav-wrapper'）。height（$（＃nav）。height（））;

$（'＃nav'）。affix（{
offset：{top：$（'＃nav'）。offset（）。top}
}）;

$（'＃nav'）。on（'attached.bs.affix'，function（）{
$（'＃content'）。css（{margin-top：100px} ）
}）;
}）;


https://jsfiddle.net/yyLbgh98/1/

Having a little trouble working this one out. I have a bootstrap navbar that goes from static to fixed when the viewer scrolls past the logo at the top. Everything works fine, except when the navbar reaches the top, it jumps down missing first few lines of content. Can anyone help me solve this?

html

<div id="logo">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>BIG,</h1>
                <h1>BIG LOGO!</h1>
            </div>
        </div>
    </div>
</div>    

<div id="nav-wrapper">
    <div id ="nav" class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="#">Project name</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>
</div>    

css

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}

java

$(function() {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });
});

Check the JSFIDDLE example

Thanks guys!

解决方案

$(function() {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: { top: $('#nav').offset().top }
    });

    $('#nav').on('affixed.bs.affix', function () {
        $('#content').css({"margin-top": "100px"})
    });
});

https://jsfiddle.net/yyLbgh98/1/

这篇关于引导静态到固定的navbar滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！