のdiv皮の上に別のdiv

をスクロールすると、これは私がこれまで持っているものです：あなたはそれがナビゲーションを非表示になりますDIVの先頭にスクロールするとのdiv皮の上に別のdiv

$("#main").each(function() {this.scrollTop = this.scrollHeight; 

     if ($(this).scrollTop()>0) 
     { 
      $('#navigation').addClass("nav-hide"); 
     } 
     else 
     { 
      $('#navigation').addClass("nav-normal"); 
     } 
    });

だから基本的に、私は把握しようとしていますバー。だからあなたはそれの上にナビゲーションバーなしでdivを読むことができました。何か案は？ありがとう。 https://jsfiddle.net/qb15p5g7/3/

出典

2016-03-25 Mechetle

ノートこのようなものが必要なのですか？：$（ "＃メイン"）、各（関数（）..しかし、これが唯一のこれまでの意志を。複数のインスタンスを持つ要素に対してのみ.each（）を使用する必要があります（例えば、$（ "。pageSection "）.each（function（）...）そして@Maxwell Laskyと.scroll（）を使う方法に同意します – gavgrif

はなく、各機能しない限りを参照してください隠すためにそれを使用することができますナビゲーションを非表示にする必要があるセクションが複数あり、それぞれを使用する必要はありません。私は#mainのIDを使用しているためIDを使用していないと仮定しています。。また、複数のクラスを追加する必要はありません。クラスを追加してクラスを削除するだけです。それではあなたのコードは次のようになりますあなたがあなたのページ上の複数のインスタンスでNAVを非表示にする必要がある複数のセクションを持っていないと仮定でイムが正しい場合：

$(window).scroll(function() { 
    if ($(this).scrollTop() >= $('#main').offset().top) { 
    $('#navigation').addClass("nav-hide"); 
    }else { 
    $('#navigation').removeClass("nav-hide"); 
    } 
});

そして、あなたはちょうど追加されますnav-hideクラスを作成し、スクロールバックするときに削除します。ここで

は、私は、これはあなたが私は私の答えを編集することができますのでお知らせいない場合は探しているものであると仮定し、この作業 JSFiddle Demo

のフィドルです。

出典

2016-03-25 04:24:03

$(window).scroll()方法は、ウィンドウのスクロール変化に実行します。

は、ここに私のJSFiddleです。あなたの#navigation IDセレクタ

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100) { 
     $('#navigation').fadeIn(); 
    } else { 
     $('#navigation').fadeOut(); 
    } 
});

JSFiddle here

あなたはjQueryのウィンドウのスクロール機能を使用する必要が.scrollのためのjQueryのドキュメント（）here

出典

2016-03-25 02:20:42 Maxwelll

数値の値を' .hウィンドウ文書の8（） 'を表示するので、スクロールすると、ヘッダーの下のセクションがナビゲーションを非表示にします。私はjQueryを初めて使ったことがありません。 – Mechetle

私が上に貼り付けたJSFiddleはちょうどあなたが言ったことを正確に行います... – Maxwelll

function scrollpos() { 
 
    if (window.scrollY<document.getElementById('header').clientHeight) { 
 
    document.getElementById('navigation').style.display = 'block'; 
 
} else { 
 
    document.getElementById('navigation').style.display = 'none'; 
 
} 
 
}

#navigation { 
 
     width: 100%; 
 
     height: 50px; 
 
     background-color: #586e75; 
 
     position: fixed; 
 
     z-index: 1000; 
 
     transition: transform 200ms ease; 
 
    } 
 
    
 
    header, 
 
    section { 
 
     height: 100vh; 
 
     width: 100%; 
 
     position: static; 
 
    } 
 
    
 
    header { 
 
     background: #4f4244; 
 
    } 
 
    
 
    section { 
 
     background: #222222; 
 
    } 
 
    
 
    .nav-normal { 
 
     transform: translateY(0%); 
 
    } 
 
    
 
    .nav-hide { 
 
     transform: translateY(-100%); 
 
    }

<body onscroll="scrollpos()"> 
 
     <div id="navigation"></div> 
 
     <header id="header"></header> 
 
     <section id="main"></section> 
 
</body>

Uは、使用している@Steboney

出典

2016-03-25 10:58:32 Batman

これは私が探しているものではありません。 – Mechetle

スクロールバーがヘッダーの下に来るときにナビゲーションバーを非表示にしたいですか？ – Batman

私はフィドルを編集してそれをチェックし、私に知らせてください。 – Batman

答えて

関連する問題