[解決済み] javascriptでdivの先頭からウィンドウの先頭までの距離を測定する
2022-05-12 02:16:59
質問
divの最上部から現在の画面の最上部までの距離はどのように決定するのでしょうか? 私はちょうど文書のトップではなく、現在の画面の上部へのピクセルの距離が必要です。 私は次のようないくつかのことを試してみました。
.offset()
とか
.offsetHeight
が、どうしても頭に入ってきません。 ありがとうございます。
どのように解決するのですか?
この場合
.offset()
と比較したオフセットを取得するために
document
要素を使用し、その後に
scrollTop
のプロパティに
window
プロパティを使用して、ユーザーがページのどこまで下にスクロールしたかを調べます。
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-element').offset().top,
distance = (elementOffset - scrollTop);
は
distance
の先頭からの距離を保持するようになりました。
#my-element
要素の上端とトップフォールドの距離を保持するようになりました。
以下はデモです。 http://jsfiddle.net/Rxs2m/
負の値は、要素がトップフォールドより上にあることを意味することに注意してください。
関連
-
fetch ネットワークリクエストラッパーの説明例
-
Vue+ElementUIによる大規模なフォームの処理例
-
モジュールのビルドに失敗しました。Error: ENOENT: no such file or directory, scandir 'D:\.... \node_modules
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] Node.jsを使うタイミングをどう判断するか?
-
[解決済み] JavaScriptでページの一番上までスクロールする?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
vueにおけるv-forループオブジェクトのプロパティ
-
vueにおけるfilterの適用シーンについて解説します。
-
Vueのイベント処理とイベントモディファイアの解説
-
Vueの「データを聴く」原則を解説
-
[解決済み】React - uncaught TypeError: 未定義のプロパティ 'setState' を読み取れない
-
[解決済み] Error : 未定義のプロパティ 'map' を読み取ることができません。
-
[解決済み】TypeError: Router.use() はミドルウェアの関数を要求しているが、Object を取得した。
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み】React-Redux: アクションはプレーンオブジェクトでなければならない。非同期アクションにはカスタムミドルウェアを使用する
-
nodejs unhandledPromiseRejectionWarning メッセージ