Css 如何使最平滑的粘贴到底部导航栏？
我正试图将一个固定的底部导航条与顶部导航条对齐。我首先尝试在数据属性中使用偏移选项，然后选择使用不同的格式。我尝试过调整页眉大小，但担心图像不会断裂到在mobile view中看起来合适的位置 似乎无法在2像素内实现最平滑的过渡。例如 JavaScriptCss 如何使最平滑的粘贴到底部导航栏？,css,twitter-bootstrap,navbar,affix,Css,Twitter Bootstrap,Navbar,Affix,我正试图将一个固定的底部导航条与顶部导航条对齐。我首先尝试在数据属性中使用偏移选项，然后选择使用不同的格式。我尝试过调整页眉大小，但担心图像不会断裂到在mobile view中看起来合适的位置 似乎无法在2像素内实现最平滑的过渡。例如 JavaScript $(document).ready(function() { $('#nav').affix({ offset: { top: $('header').offset().top
$(document).ready(function() {
$('#nav').affix({
offset: {
top: $('header').offset().top
}
});
});
header {
height:630px;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
<body id="home">
<header>
<section>
<img>
</section>
</header>
<!-- Begin Navbar -->
<div id="nav">
<div class="navbar navbar-default navbar-static">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
<span class="glyphicon glyphicon-bar"></span>
</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a>
</li>
<li class="divider"></li>
<li><a href="#">Link</a>
</li>
<li><a href="#">Link</a>
</li>
</ul>
<ul class="nav pull-right navbar-nav">
<li>
<form class="navbar-form">
<input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i>
</button>
</form>
</li>
<li>
<a href="#"><i class="glyphicon glyphicon-flag"></i> <span class="badge">2</span></a>
</li>
</ul>
</div>
</div>
</div>
<!-- /.navbar -->
</div>
<section>
BELOW the navbar
<img>
</section>
-
-
导航栏下方