jQueryを使わずにCSSとJavaScriptを使用してスティッキーヘッダーを作成する方法?

DDD
リリース: 2024-10-31 11:38:01
オリジナル
226 人が閲覧しました

How to Create a Sticky Header with CSS and JavaScript Without jQuery?

スクロール時のヘッダーの修正

スクロールしても表示されたままになるヘッダーを作成する場合、jQuery を使用せずに CSS と HTML だけを使用してこの動作を実装できます。

CSS と HTML ソリューション

スティッキー ヘッダー クラスを導入します:

<code class="css">.sticky-header {
  width: 700px;
  height: 50px;
  background: orange;
  position: fixed;
}</code>
ログイン後にコピー

HTML に、「sticky」クラスの div を追加します:

<code class="html"><div class="sticky"></div></code>
ログイン後にコピー

スクロール イベント用の JavaScript

ヘッダーの固定を正確に制御するには、スクロール イベントに JavaScript が必要です。

<code class="javascript">$(window).scroll(function() {
  var sticky = $('.sticky'),
    scroll = $(window).scrollTop();

  if (scroll >= 100) {
    sticky.addClass('fixed');
  } else {
    sticky.removeClass('fixed');
  }
});</code>
ログイン後にコピー

拡張例

固定ポイントを決定するには画面上のスティッキー要素の位置に基づいて、 offset().top:

<code class="javascript">var stickyOffset = $('.sticky').offset().top;

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

  if (scroll >= stickyOffset) {
    sticky.addClass('fixed');
  } else {
    sticky.removeClass('fixed');
  }
});</code>
ログイン後にコピー
を使用します。

以上がjQueryを使わずにCSSとJavaScriptを使用してスティッキーヘッダーを作成する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!