我在滾動時固定標題的位置存在問題,但向下滾動時,標題不固定,因爲其他區域位置是絕對的。滾動定位時的固定標題
我的HTML:
<div class="titleBar">
<div class="container">
<h1 class="titleBar-title">Title 1</h1>
<p class="titleBar-subTitle">Title 2</p>
</div>
<div id="subnav">
<div class="subnav-inner">
<ul class="subnav-list nav">
<li><a href="#salt">Salt</a></li>
<li><a href="#pepper">Pepper</a></li>
</ul>
</div>
</div>
</div>
我的CSS:
.subnav-fixed {
position: fixed;
bottom: auto;
top: 0;
padding-top: 10px;
z-index: 99;
-webkit-box-shadow: 0 0 40px 0 rgba(0,0,0,0.15);
box-shadow: 0 0 40px 0 rgba(0,0,0,0.15);
}
#subnav {
width:100%;
height:40px;
background:#FFF;
position: absolute;
bottom:0;
left:0;
z-index:99;
}
這裏是我的JavaScript:
var myHeader = $('#subnav');
myHeader.data('position', myHeader.position());
$(window).scroll(function(){
var hPos = myHeader.data('position'), scroll = getScroll();
if (hPos.top < scroll.top){
myHeader.addClass('subnav-fixed');
}
else {
myHeader.removeClass('subnav-fixed');
}
});
function getScroll() {
var b = document.body;
var e = document.documentElement;
return {
left: parseFloat(window.pageXOffset || b.scrollLeft || e.scrollLeft),
top: parseFloat(window.pageYOffset || b.scrollTop || e.scrollTop)
};
}
這是一個從這個帖子採取Fixed header while scroll
我想保持'subnav'position:absolute
我該怎麼做?我覺得JavaScript需要改變,但我不確定要輸入什麼內容。
您的#subnav不能位置:固定**和**位置:絕對;我覺得在這種情況下,你想要達到的目標的視覺表現將會有很長的路要走。 – isotrope