滾動滾動頭

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/zh-CN/docs/Web/CSS/position#Sticky_positioning ），但您的瀏覽器支持將受到很大限制（ http://caniuse.com/#feat=css-sticky ）。

Answer 2

這有什么幫助嗎？ jQuery位置：通過滾動該頁面中的頁面來解決“ NAVBAR”問題，還有一個演示，尋找標記的答案。

您也可以嘗試我很久以前寫的這個插件Simple-Sticky-Top-Navbar 。 有一段時間我沒有更新它，但是，嘿，您可以隨時以自己喜歡的方式對其進行分叉和調整:)