800ピクセル以降のスクロールダウンでDivを表示し、上スクロールで非表示にする方法

800px 後のスクロールダウンで Div を表示するを再検討

この再検討では、下にスクロールしたときに非表示の div を表示するアプローチを改良することを目的としています。ページから 800px 以降top.

解決策:

JavaScript の $(document).scroll() 関数を使用した簡単な解決策を採用します。

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

説明:

1. scrollTop は、ページの現在の垂直スクロール位置を取得します。
2. scrollTop が 800 ピクセルを超える場合、bottomMenu div は次を使用して表示されます。 fadeIn().
3. 逆に、scrollTop が 800 ピクセルを下回る場合、bottomMenu は fadeOut().

スクロールアップの拡張:

を使用して非表示になります。

このソリューションを強化するために、上にスクロールし、スクロールの高さが以下の場合にbottomMenuを非表示にする機能を追加できます。 800px:

if (y < 800 && $('.bottomMenu').css('display') !== 'none') {
    $('.bottomMenu').fadeOut();
}

この追加条件により、上にスクロールするときに BottomMenu が非表示のままになり、スクロールの高さが 800 ピクセル未満になることが保証されます。

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