本部フェードイン/アウトページ

Question

の上にスクロール+視認性に私は現在、使用しています：

<script> 
 
$(window).scroll(
 
    { 
 
     previousTop: 0 
 
    }, 
 
    function() { 
 
    var currentTop = $(window).scrollTop(); 
 
    if (currentTop < this.previousTop) { 
 
     $("#menu").fadeIn(); 
 
    } else { 
 
     $("#menu").fadeOut(); 
 
    } 
 
    this.previousTop = currentTop; 
 
}); 
 
</script>

マイページのメニューを作成するにはスクロールダウンするときフェードアウトとフェードインスクロールしたときこれはうまくいく。うまくいかないのは、ページの上にいるときにいつも見えるようにする必要があるということです。

私が見つけた唯一の解決策は、スクロールソリューションのフェードイン/アウトを無効にしています。両者が連携して解決策を見つけることを試みています。 Ex。上の200ピクセルをスクロールするときには常に表示されますが、スクロールの上/下にはフェードイン/アウトの機能があります。助言がありますか？ありがとう！

Answer 1

コードを編集して試しました。あなたの提案のための

<script> 
$(window).scroll(
    { 
     previousTop: 0 
    }, 
    function() { 
    var currentTop = $(window).scrollTop(); 
    if (currentTop == 0) { 
     $("#menu").addClass('static-on-top'); 
    } else { 
     $("#menu").removeClass('static-on-top'); 
     if (currentTop < this.previousTop) { 
      $("#menu").fadeIn(); 
     } else { 
      $("#menu").hide(); 
     } 
    } 
    this.previousTop = currentTop; 
}); 
</script> 
<style type="text/css"> 
.static-on-top { 
     display: block !important; 
} 
#menu { 
    position: fixed; 
    height: 30px; 
    background: red; 
    width: 100%; 
    top: 0; 
    left: 0; 
} 
</style> 
<div id="menu"> 
    Menu 
</div> 

Answer 2

i suggetページの上部にあるときにクラス名を追加します。それから、CSSでスタイルを立てて常に上に表示することができます。

<script> 
$(window).scroll(
    { 
     previousTop: 0 
    }, 
    function() { 
    var currentTop = $(window).scrollTop(); 
    if (currentTop == 0) { 
     $("#menu").addClass('static-on-top'); 
    } else { 
     $("#menu").removeClass('static-on-top'); 
     if (currentTop < this.previousTop) { 
      $("#menu").fadeIn(); 
     } else { 
      $("#menu").fadeOut(); 
     } 
    } 
    this.previousTop = currentTop; 
}); 
</script> 
<style type="text/css"> 
.static-on-top { 
     display: block !important; 
} 
</style>