HTMLページの一部を表示させないようにする

Question

私はビューポートの高さ全体を占めるヘッダーセクションを持つWebサイトで作業しています。このセクションを終了するには、視聴者はボタンをクリックしてから、コンテンツにスクロールダウンする必要があります。デザインはthis websiteに基づいていました。

しかし、あなたはその領域を離れた後にそこにスクロールすることができないので、ページの上部を「カット」しているように見えました。これはどのように達成されましたか？いくつかのjQueryソリューションがありますか、それともすべてCSSですか？

Answer 1

それは混合物です：あなたはdisplay:none;にあなたのヘッダーのためのdivを設定したボタンのclick() -methodでは、$('#button').click(function(){$('#header').hide();});

Answer 2

ように私は、ページを見てとっていると私は相互作用という結論になってきましたJavaScriptに基づいています。なぜ私はこれを考えるのですか？スクロールアニメーションが終了すると、イントロセクション（<section id="intro"></section>）がドキュメントから消えるため、非常に簡単です。

これは、jQueryの.remove()機能を使用して達成できるものです。この関数は、要素とその子要素をDOMから削除します。 The documentation can be found here

これをやってのけるために使用されたコードは、おそらくおおよそ次のようになります。

$("#intro").remove() 

この相互作用は、CSSを使用して行われた場合は、要素が消えていませんが、代わりに、いくつかのインラインがあっただろう要素にCSSが追加されました（<section id="intro" style="display: none;">など）

もちろん、このようなことは、このような外観のスクロールまたはクリックイベントによってトリガーされます。クリックやマウスホイールで

$("#intro").click(function(){ 
    // Code that changes element opacity as mentioned by Rahul Jain 

    // You can use 'this' as the selector since you are inside a function of that same selector 
    $(this).remove(); 
}); 

Answer 3

、彼らは1から0にその部分の不透明度を変更し、あなたにあった場合は、アニメーションの完全に、彼らは

$('portion-selector').remove();