ページがスクロールしたときの固定ヘッダー変換

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

...彼がスクロールするよう維持したいです

あなたに答えを与えるGoogleの検索条件は「反応メニュー」+ JavaScriptです。

私の場合、jqueryプラグインを探していたので、「jquery」で追加しました。私は実際には正しく、正確ではないではないことは、「固定ヘッダ変換」

:)