800ピクセル以降のスクロールにDivを表示するにはどうすればよいですか?

800 ピクセル以降の下スクロール時に Div を表示する

はじめに

この記事では、指定されたポイントを超えて下にスクロールしたときに非表示の Div が表示される問題について説明します。ウェブページ上で。目標は、ユーザーがページの上部から 800 ピクセルスクロールした後にこれを達成すると同時に、上にスクロールして戻り、スクロールの高さが 800 ピクセル未満になったときに div が非表示になるようにすることです。

HTML 構造

問題の div の HTML は次のとおりです:

<div class="bottomMenu">
  <!-- Content -->
</div>

CSSスタイリング

次の CSS が div に適用されます:

.bottomMenu {
  width: 100%;
  height: 60px;
  border-top: 1px solid #000;
  position: fixed;
  bottom: 0px;
  z-index: 100;
  opacity: 0;
}

jQuery スクリプト

最初に提供された jQuery スクリプト:

$(document).ready(function() {
    $(window).scroll( function(){
        $('.bottomMenu').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            if( bottom_of_window > bottom_of_object ){
                $(this).animate({'opacity':'1'},500);
            }
        }); 
    });
});

改訂された jQuery スクリプト必要な機能を実現するには

必要な機能を実現するには、 jQuery スクリプトは次のように変更する必要があります:

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('.bottomMenu').fadeIn();
  } else {
    $('.bottomMenu').fadeOut();
  }
});

結論

この修正された jQuery スクリプトは、ページの上部から 800 ピクセル以上下にスクロールした後に div を表示します。上にスクロールし、スクロールの高さが 800 ピクセル未満の場合、div は非表示になります。

以上が800ピクセル以降のスクロールにDivを表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。