ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用してスクロール時にビューポートの上部に Div を固定するにはどうすればよいですか?

CSS を使用してスクロール時にビューポートの上部に Div を固定するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-11-15 07:37:02
オリジナル
949 人が閲覧しました

How Do I Fix a Div to the Top of the Viewport on Scroll with CSS?

CSS を使用したスクロール時の Div の固定

あなたの質問は、スクロールした後も div を固定したままにすることに関するものです。前述したように、 div にposition: fix を適用するだけで、ページ上に表示される前に表示されます。

幸いなことに、CSS の進歩により、次の機能が可能になりました。

スティッキー位置プロパティにより、9gag の 2 番目の広告の動作と同様に、div がビューポートの上部に到達しても固定されたままになります。

jQuery 代替

互換性のため古いブラウザの場合、元の jQuery アプローチは次のとおりです:

以上がCSS を使用してスクロール時にビューポートの上部に Div を固定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート