スクロールしてきたdivを固定にするには?
2023-10-29 21:01:51
質問
どのようにすれば
div
にスクロールした後、固定されたまま
div
? 私は
div
がページの後半にあり、スクロールしないとその
div
.
を使ったら。
.divname {
position: fixed;
}
は
div
は、通常表示される前に表示されます。私が必要とするものの良い例は、2番目の広告が
9ギャグ
. あなたの画面の解像度が十分に低い場合は、フロントページをロードした後、その広告は表示されませんが、スクロールダウンした後、あなたは第二の広告が表示され、それはあなたがスクロールダウンしている間、固定されたままになります。
どのように解決するのですか?
CSSのみで可能になりました。 https://stackoverflow.com/a/53832799/1482443
jQueryのアプローチを必要とする人のために、以下は8年前に投稿されたオリジナルの回答です。
私はこれがhtml/cssのみタグ付けされていることを知っているが、あなたはcssだけでそれを行うことはできません。最も簡単な方法は、いくつかのjQueryを使用することです。
var fixmeTop = $('.fixme').offset().top; // get initial position of the element
$(window).scroll(function() { // assign scroll event listener
var currentScroll = $(window).scrollTop(); // get current position
if (currentScroll >= fixmeTop) { // apply position: fixed if you
$('.fixme').css({ // scroll to that element or below it
position: 'fixed',
top: '0',
left: '0'
});
} else { // apply position: static
$('.fixme').css({ // if you scroll above it
position: 'static'
});
}
});
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] Webフォームのフィールド/入力タグでブラウザのオートコンプリートを無効にするにはどうすればよいですか?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] 絶対位置指定された要素をdivの中央に配置するにはどうしたらよいですか?
-
[解決済み] 位置は固定だが、容器に対して相対的
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] node.jsで文字列のsha1ハッシュを取得するにはどうすればよいですか?
-
[解決済み] 文字列がhtmlであるかどうかをチェックする
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] ECMAScriptとは?
-
[解決済み] JavaScriptでjson-objectのキーを取得する [重複].
-
[解決済み] javascriptでオプションのパラメータを扱う
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法