滾動粘滯標題

Question

我目前正在設計一個新的網站，並具有100％響應的佈局，寬度和高度。

我有一個標題，位於屏幕底部0px。一旦滾動過去，我希望標題獲得一類「粘性」，然後以固定格式放置在頁面頂部的標題。

目前我只能找到當您點擊頁面上的某個像素的導航位於頂部的jQuery代碼。不過，我有一個基於百分比的網站，因此在每個計算機屏幕上，標題所在的像素將會不同。

有沒有人有我使用正確的代碼坐下我的標題在屏幕的頂部一旦向下滾動。

我已添加圖片進行說明。 謝謝。

我當前的jQuery代碼是：

$(window).scroll(function() { 
    if ($(window).scrollTop() > $(window).height()) { 
     $('header').removeClass('sticky'); 
    } else { 
     $('header').addClass('sticky'); 
    } 
}); 

然而，這並不縫工作。

Answer 1

對於你的CSS試試這個：

.sticky { 
    position: fixed; 
    top: 0px; 
} 

這將保持粘在屏幕頂部的標題。或者，您可以給標頭position: sticky;（https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning），但是您的瀏覽器支持將非常有限（http://caniuse.com/#feat=css-sticky）。

Answer 2

這有什麼幫助嗎？ JQuery Position:Fixed 'NAVBAR' by scrolling the page在那個頁面中也有一個演示，請看標記的答案。

你也可以試試我很久以前寫的這個插件Simple-Sticky-Top-Navbar。這是一段時間我沒有更新它，但嘿，你可以隨時分叉，並按你喜歡的方式調整它:)