HTML、CSS、jQuery でスクロールする固定ヘッダーを作成する方法-CSSチュートリアル-php.cn

HTML、CSS、jQuery でスクロールする固定ヘッダーを作成する方法

Susan Sarandon

リリース： 2024-10-31 03:20:31

オリジナル

848 人が閲覧しました

How to Create a Fixed Header That Scrolls with HTML, CSS, and jQuery?

HTML、CSS、jQuery を使用したスクロール固定ヘッダーの作成

Web サイトの機能を強化するには、多くの場合、以下に基づいて動的に動作する要素の作成が必要になります。スクロール中に画面上に固定されたままになるヘッダーなどのユーザーインタラクション。最初は CSS と HTML のみを使用してこの効果を作成することを検討したかもしれませんが、スクロールイベントを監視し、適切な変更を実装するには JavaScript の力が必要です。

これを実現するには、段階的な手順に着手します。解決策:

1.スティッキーコンテナを HTML に追加します。

を作成します。固定ヘッダーコンテナとして機能するクラス "sticky" を使用します。

<code class="html"><div class="sticky"></div></code>

ログイン後にコピー

2.固定位置のスタイルを設定します:

位置と寸法を調整する「固定」クラスを使用して、固定ヘッダーのスタイルを定義します。

<code class="css">.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}</code>

ログイン後にコピー

3. jQuery を使用したスクロールイベント処理の実装:

jQuery のスクロールイベントを利用して、ユーザーのスクロール動作を監視します。スクロール位置に基づいて、「sticky」要素に「fixed」クラスを追加または削除します。

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

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});</code>

ログイン後にコピー

例: http://jsfiddle.net/gxRC9/501/

さらに、スティッキー要素が画面の上部に到達したときにトリガーポイントを設定する必要があるシナリオに遭遇する可能性があります。このような場合、offset().top メソッドを利用してスティッキー要素の位置を決定し、それに応じてスクロールイベント処理を変更します。

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

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

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});</code>

ログイン後にコピー

拡張例: http://jsfiddle。 net/gxRC9/502/

これらのテクニックを組み合わせることで、スクロール時にヘッダーが自動的に修正される機能を強化し、最小限のコードと最大の効果で Web サイトのユーザーエクスペリエンスを向上させます。

以上がHTML、CSS、jQuery でスクロールする固定ヘッダーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。