我有一个导航栏,在加载时从页面顶部开始大约200px.当我向下滚动时,我希望导航栏能够“粘贴”到页面的顶部,并在滚动浏览其余内容时可见.
我可以让导航栏从顶部保持200px的位置,它忽略了我向右拉的内容并将其全部拉到左侧.我需要确保导航栏仍然可见,并且布局/样式在整个过程中都是相同的.
我可以让导航栏从顶部保持200px的位置,它忽略了我向右拉的内容并将其全部拉到左侧.我需要确保导航栏仍然可见,并且布局/样式在整个过程中都是相同的.
下面是我的jsfiddle,它显示了我遇到的麻烦
<!-- Begin logo / Search --> <header class="masthead"> <div class="row"> <div class="span6"> <div class="logo pull-left"> <h1><a href="/">name</a></h1> </div> </div> <div class="span6"> <div class="pull-right hidden-phone"> <form class="search" action="/search" id="site-search"> <input type="hidden" name="records" value="6"> <div class="input-append"> <input type="text" name="q" class="search_Box" placeholder="Search" value="" autocomplete="off" /> <button class="btn" type="submit"><i class="icon-search"></i></button> </div> </form> </div> </div> </div> </header> <!-- Begin Navbar --> <div> <div class="navbar navbar-static"> <div class="navbar-inner" id="mastnav"> <div class="container"> <!-- .btn-navbar is used as the toggle for collapsed navbar content --> <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <div class="nav-collapse collapse"> <ul class="nav"><li><a href="#">nav</a> </li></ul> <ul class="nav pull-right"> <li> <a href="/cart"><i class="icon-shopping-cart"></i> <span id="cart-count">1</span></a> </li> </ul> </div> </div> </div> </div><!-- /.navbar --> </div>
解决方法
一旦导航变为附加,它就不再遵循正常的导航栏CSS样式.您可以为外部DIV容器指定一个id,然后将其设置为`affix’元素.使用CSS确保它保持100％宽度.
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
有关：
Affix Bootstrap flickers after affix-bottom reached and scrolling back top