800ピクセル下にスクロールした後にDivを表示し、上にスクロールするとDivを非表示にする方法は?

800px 以降のスクロールダウンで Div を表示

質問:

どうすれば作成できますか?ページの上部から 800 ピクセル下にスクロールすると、隠し div が表示されますか?上にスクロールして高さが 800px 未満になると、div が表示されなくなります。

HTML:

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

CSS:

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

スクロール用の jQuery バリアント800px:

この jQuery コードは、下にスクロールした後に div を表示します。 800px:

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

上にスクロールするときに非表示にするスクロール イベント バリアント:

上にスクロールし、高さが以下の場合に div を非表示にするには800 ピクセルの場合は、次のコードを使用します:

$(document).scroll(function() {
  var height = $(window).scrollTop();

  if (height > 800) {
    $('.bottomMenu').css({
      display: 'block',
      opacity: 1
    });
  } else {
    $('.bottomMenu').css({
      display: 'none',
      opacity: 0
    });
  }
});

以上が800ピクセル下にスクロールした後にDivを表示し、上にスクロールするとDivを非表示にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。