我正在试图在滚动到某个位置时获取subnav。但是当它到达那个位置时,它下面的一切都会上移。不能弄清楚它是什么。可能非常简单,我只是没有看到它。感谢您的帮助滚动时固定的元素
CSS
#subnav ul{
list-style: none;
}
#subnav a:visited{
color: #000;
text-decoration: none;
}
#subnav a{
color: #000;
text-decoration: none;
}
#subnav.fixed{
position:fixed;
top:0;
}
.main {
-webkit-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
min-height: 500px;
height: auto;
width: 700px;
-moz-box-shadow: -1px 1px 1px 1px #ccc;
-webkit-box-shadow: -1px 1px 1px 1px #ccc;
box-shadow: -1px 1px 1px 1px #ccc;
float: none;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
z-index:1000;
position: relative;
font-size: 12px;
background-color: #FFF;
background-position: left top;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
margin-bottom: -200px;
}
HTML
<div id="subnav">
<ul>
content
</ul>
</div>
<div class="main">
<div class="imageholder">
content
</div>
<div class="text">
content
</div>
</div>
$(document).ready(function() {
var top = $('#subnav').offset().top - parseFloat($('#subnav').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('#subnav').addClass('fixed');
} else {
// otherwise remove it
$('#subnav').removeClass('fixed');
}
});
});
你是说当滚动条从“静态”定位到“固定”定位时,内容似乎'跳跃'了吗? – jackwanders 2012-07-05 13:35:10
您需要为底部的对接设置一个自定义类,至少这就是我正在使用的类,如果它不在顶部并且不固定,请添加此边距并使其停靠页脚。 – Alexandre 2012-07-05 13:51:38