頁面滾動時固定標題轉換

Question

我不能爲我的數字生活這一點。有誰知道這個滾動效果是如何在這個網站上創建的？ - http://blindbarber.com/news

我正在研究一個項目，這個效果會對我的固定導航在滾動時不會太大。

在此先感謝。

Answer 1

頭停留在用CSS position:fixed頂..要麼你可以設置頁眉CSS - 從一開始position:fixed權利或一旦他開始滾動頁面將其更改爲position:fixed ..和更新標題到內容你要保持他滾動..

// css 
.container { 
    height: 2000px; 
    width: 100%; 
    background-color: yellow; 
} 

.header { 
    text-align: center; 
    background-color: red; 
    height: 100px; 
    min-height: 50px; 
    width: 100%; 
} 

// js 

window.onscroll= function() { 
    var top = window.pageXOffset ? window.pageXOffset : document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop; 
    var header = document.getElementById("header"); 
    if (top > 50){ 
    header.style.position = "fixed"; 
    header.style.height = "50px"; 
    } else { 
    header.style.position = "relative"; 
    header.style.height = "100px"; 
    } 
} 

//html 
<div class="container"> 
    <div id="header" class="header"> 
    Hello World 
    </div> 
</div> 

演示here

Answer 2

這是你找什麼，我認爲：

http://www.backslash.gr/content/blog/webdevelopment/6-navigation-menu-that-stays-on-top-with-jquery

因此，谷歌搜索條件，給你一個答案是「響應菜單」+ JavaScript。

在我的情況下，我正在尋找一個jquery插件，所以我加入了「jquery」。我沒有發現太多使用「固定標題變換」

:)