スクロール位置に基づいて Div を表示および非表示にする方法は?-CSSチュートリアル-php.cn

スクロール位置に基づいて Div を表示および非表示にする方法は?

Susan Sarandon

リリース： 2024-12-13 00:42:09

オリジナル

818 人が閲覧しました

How to Show and Hide a Div Based on Scroll Position?

上から 800 ピクセルスクロールした後に非表示の Div を表示

シナリオ:

ユーザーの後に非表示の Div を表示したいとします。ページを 800 ピクセル下にスクロールします。さらに、ユーザーが上にスクロールし、高さが 800px 未満になると、div が表示されなくなります。

HTML Structure:

<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;
}

ログイン後にコピー

JavaScript (jQuery):

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

ログイン後にコピー

説明:

このスクリプトはドキュメントのスクロール位置を監視します。スクロール位置が 800 ピクセルを超えると、.bottomMenu div のフェードインアニメーションがトリガーされます。逆に、スクロール位置が 800 ピクセルを下回ると、フェードアウトアニメーションがトリガーされます。

以上がスクロール位置に基づいて Div を表示および非表示にする方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。