スクロールエフェクトにこのhttps://www.invisionapp.com/ヘッダーを実装しようとしていますが、動作させることができません。スクロールエフェクトのヘッダーを隠す/表示する
私はこの
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() < 200) {
jQuery('header').hide();
} else {
jQuery('header').show();
}
});
を試してみましたが、それは動作しません。ヘッダーは表示されません。このエフェクトを行うヘッダーアニメーションライブラリがいくつか見つかりましたが、単純なjQueryコードで実装したい、ライブラリを使いたくないです。
誰かが私を助けてくれますか？この効果はあなたのあなたのヘッダーを動作させるためには
（つまり、ワットだ場合は）
header {
position: fixed;
}
か、私はこのことを願っています。この
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() < 200) {
$('header').css('position', 'absolute');
} else {
$('header').css('position', 'fixed');
jQuery('header').show();
}
});
のようなあなたのjQueryに追加することができますので、修正する必要があります助けて
私は試しました。追加位置：固定。それはヘッダーを隠しますが、200ピクセルのonScrollの後は表示されません。 ： –
私はコードを試して、それが動作している、あなたが追加できる唯一のものは、ページがロードされたときにヘッダーを非表示にすることです –
位置で：ヘッダーに固定されて、それは動作している必要があります参照してください[fiddle]（https：// jsfiddle.net/5requp5L/2/）の動作例があります。ヘッダー要素にhtml/cssを指定できますか？ –
ここはシンプルで純粋なjavascriptの例です。
function scroll{
\t var header = document.getElementById('header');
var ypos = window.pageYOffset;
if(ypos>600)
{
\t header.style.opacity="0";
\t \t
}
else{
\t header.style.opacity="1";
}
window.addEventListener(scroll,"scroll");
}#header{
width:100%;
height:50px;
background:#333;
}<nav id="header">
</nav>
あなたのブラウザのコンソールですべてのメッセージを取得していますか？ – Terry
あなたのhtmlに 'header'要素がありますか？それは修正されましたか？ – DaniP
はい私はそのヘッダーを持っています。それは絶対的な位置を持っています。 –