ホームページ >ウェブフロントエンド >CSSチュートリアル >通過後にスクロールする Div スティックを作成するにはどうすればよいですか?

通過後にスクロールする Div スティックを作成するにはどうすればよいですか?

DDD
DDDオリジナル
2024-11-13 14:47:02438ブラウズ

How to Make a Scrolling Div Stick After Passing it?

スクロール Div スティックの作成

特定の div をスクロールした後も、その div を静止したままにしておく必要がありますか? CSS または jQuery を使用してこれを実現する方法は次のとおりです。

CSS のみのアプローチ

最近の進歩により、CSS だけでこの機能を実現できます。詳細については、こちらをご覧ください: [スクロール後の CSS のみの固定 Div](https://stackoverflow.com/a/53832799/1482443).

jQuery アプローチ

jQuery が許容できる場合は、試してくださいこれ:

  1. div の初期位置を定義します:

    var fixmeTop = $('.fixme').offset().top;   
  2. スクロール イベント リスナーを追加します:

    $(window).scroll(function() {  
  3. スクロール位置が最初の div を超えているかどうかを判断しますPosition:

    if (currentScroll >= fixmeTop) {
  4. div を越えてスクロールしたときに固定位置を適用します:

        $('.fixme').css({                      
            position: 'fixed',
            top: '0',
            left: '0'
        });
  5. div の上にスクロールしたときに位置をリセットしますdiv:

    } else {                                   
        $('.fixme').css({                      
            position: 'static'
        });
    }

より包括的な理解については、この実際の例を確認してください: [スクロール後の jQuery 固定 Div](http://jsfiddle.net/5n5MA/2/) .

以上が通過後にスクロールする Div スティックを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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