滾動定位時的固定標題

Question

我在滾動時固定標題的位置存在問題，但向下滾動時，標題不固定，因爲其他區域位置是絕對的。

我的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需要改變，但我不確定要輸入什麼內容。

Answer 1

這是多麼我已經做到了我的網站上，jsFiddle

$(window).scroll(function() { 
    $('#sticky').toggleClass('scrolling', $(window).scrollTop() > $('#stickyX').offset().top); 

}); 


.scrolling { 
    position: fixed; 
    top: 0px; 
    width: 98%; 
    max-width: 940px; 
    z-index:99999999999; 
    transition:all 1s; 
} 

Answer 2

看一看position: sticky;的只有CSS-溶液（WebKit的唯一，大氣壓）和必要的JS回退。