スクロール時にヘッダーイメージが消えて、ページの上部にスティックするためのナビゲーションバーがあります。

Question

スクロール時にヘッダーが消えて、ページのtoにスティックするようにしたい場合。

<div class="headerimg"> 
    <!-- image that will disappear when scroll --> 
</div> 
<div class="navbar"> 
    <!--navbar to stick to the top when image disappear --> 
</div> 

Answer 1

あなたはこれらのタスクを実行するためにscrollイベントを使用する必要があります。ここでは、class.redと.greenの2つのdivを使用しています。スクロールの上部に.reddivとスティック.green divを非表示にします。
例：

HTML

<div class="red"></div> 
<div class="green"></div> 

CSS

body { 
    height: 1000px; 
    position: relative; 
} 
.red { 
    background: red; 
    height: 100px; 
    width: 100%; 
} 
.green { 
    background: green; 
    height: 100px; 
    width: 100%; 
} 
.stick { 
    position: fixed; 
    top: 0; 
} 

jQueryの

ここでは

// Listen to scroll event for window 
$(window).scroll(function(){ 
    $(".red").hide(); // Hide the red div 
    $(".green").addClass("stick"); // Stick the green div at top 
}); 

はあなたが単にスクロールイベントとスクロール停止イベントを使用することができますdemo

Answer 2

です。あなたが与えたようにヘッダーを隠して表示するため。 ので、

 $(document).on("scroll",function(){ 
     $('.headerimg').hide(); }); 

     $(document).on("scrollstop",function(){ 
     $('.headerimg').show(); }); 

内部スタイルの表示を追加していない

のjQuery inbulit機能表示/非表示：なし、我々は表示を使用する場合、（つまりは初期としてそれを作る）表示なしを削除しない：なしプロパティ「ナビゲーションバーを」「headerimgを占有します' スペース。そうでなければ、ヘッダースペースを保持し、ヘッダーの内容を非表示にしたい場合は、vissible：noneプロパティを直接使用できます。

ありがとうございます