ホームページ >ウェブフロントエンド >CSSチュートリアル >800 ピクセル下にスクロールした後に Div を表示するにはどうすればよいですか?

800 ピクセル下にスクロールした後に Div を表示するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-30 20:16:091024ブラウズ

How Can I Show a Div After Scrolling Down 800 Pixels?

800 ピクセル以降のスクロールダウンで div を表示

シナリオ:
スクロール時に非表示の div を表示する必要があるページの上部から少なくとも 800 ピクセル下にあります。これを実現するには、既存の例を変更する必要があります。

解決策:

リクエストを満たすには、jQuery コードを次のように変更します。

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

説明:

  • scroll()イベント リスナーはページのスクロール位置を監視します。
  • 800 ピクセルを超えて下にスクロールすると (y > 800)、fadeIn() を使用して .bottomMenu div が表示されます。
  • 上にスクロールすると、高さが 800 ピクセル未満 (y

例:

<!-- HTML -->
<div class="bottomMenu">
  <!-- content -->
</div>
<!-- CSS -->
.bottomMenu {
    display: none;
    width: 100%;
    height: 60px;
    border-top: 1px solid #000;
    position: fixed;
    bottom: 0;
    z-index: 100;
}

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。