粘性头css和jquery效果
我有以下代码:粘性头css和jquery效果,jquery,css,positioning,css-position,Jquery,Css,Positioning,Css Position,我有以下代码: function fixDiv() { var $div = $("#navwrap"); if ($(window).scrollTop() > $div.data("top")) { $('#navwrap').css({'position': 'fixed', 'top': '0', 'width': '100%'}); } else { $('#navwrap').css({'position':
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);
.导航
{
宽度:100%;
保证金:0自动;
背景:黑色;
高度:40px;
}
这样做的效果与在的效果类似,导航栏在滚动过其位置后会粘在顶部。我遇到的问题如下:
当浏览导航栏时,其位置从静态变为“固定”。这将导致跳转到导航栏高度的大小。如何使#navwrap div在防止跳跃的同时保持其40px的高度
抱歉,如果这个问题似乎有点特别,我只是在这个问题上停留了很长时间,并认为有人可能会提供帮助。只需执行以下操作:
CSS:
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>
#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;
}
<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>
$(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();
});
});