我有以下代码:
function fixDiv() {
var $div = $("#navwrap");
if ($(window).scrollTop() > $div.data("top")) {
$('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'});
}
else {
$('#navwrap').css({'position': 'static', 'top': 'auto', 'width': '100%'});
}
}
$("#navwrap").data("top", $("#navwrap").offset().top);
// set original position on load
$(window).scroll(fixDiv);
<div class="nav" id="navwrap">
<style type="text/css">
.nav
{
width: 100%;
margin: 0 auto;
background: black;
height: 40px;
}
</style>
<ul>
<li id="home_link"><a href="#"><img src="images/nav_logo.jpg" /></a></li>
<li><a href="#">Services & Pricing</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
这是类似于http://creuna.com的效果的东西,在滚动滚动之后,导航栏贴在顶部。我遇到的问题如下:
当导航栏被滚动滚动时,其位置从静态变为"固定"。这会导致导航杆高度的跳跃。我如何使#navwrapdiv在防止跳跃的同时保持其高度40px?
对不起,如果这个问题似乎有点具体,只是很长时间以来一直被困在这个问题上,并认为某人可能会提供帮助。
只要这样做:
CSS:
#sticky_nav_wrapper { height:40px; }
#sticky_nav {
height:35px;
border:1px solid #C9D6E6;
border-bottom:none; z-index:1;
}
#sticky_nav ul {
list-style:none;
margin:0;
padding:5px;
}
#sticky_nav ul li {
margin:0;
padding:0;
display:inline;
}
#sticky_nav ul li a {
float:right;
margin:0 0 0 5px;
}
html:
<div id="sticky_nav_wrapper">
<div id="sticky_nav">
<ul>
<li><a href="#">Services & Pricing</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
jQuery:
$(function () {
var sticky_nav_offset_top = $('#sticky_nav').offset().top;
var sticky_nav = function () {
var sticky_nav_wraper_width = $('#sticky_nav_wrapper').width();
var scroll_top = $(window).scrollTop();
if (scroll_top > sticky_nav_offset_top) {
$('#sticky_nav').css({ 'position': 'fixed', 'top': 0, width: '100%' });
} else {
$('#sticky_nav').css({ 'position': 'relative', width: 'auto' });
}
};
sticky_nav();
$(window).scroll(function () {
sticky_nav();
});
});