[英]How can I get the position of an element relative to the broswer viewport
我有一個div（ #dynamic ），我希望在用戶向下滾動頁面時獲取其相對於瀏覽器視口的位置值。
目前， 我的代碼片段返回不正確的結果，因為我嘗試在底部位置設置headingDiv DIV的頂部#dynamic股利。 解決這個問題可以解決我的問題。 要清楚，橙色框應該隨着文本的出現而縮小。
我已經看到這個問題用戶'codef0rmer'建議使用$("#dynamic").offset().top; 但對我來說，這只是產生了同樣的結果。
以下是jsfiddle中斷的代碼：
function sizeHeader() { var navPos = document.getElementById("nav"); var dynPos = document.getElementById("dynamic"); $("#headingDiv").css("top", navPos.getBoundingClientRect().bottom); $("#headingDiv").css("bottom", dynPos.getBoundingClientRect().top); } $(window).scroll(function() { sizeHeader(); }); window.onload = sizeHeader();
/* Normalisation */ * { margin: 0 0 0 0; padding: 0 0 0 0; } /* Navigation bar */ nav { display: block; background-color: black; color: #FFFBD0; padding: 1%; position: fixed; right: 0; left: 0; bottom: auto; z-index: 100; } /* Main content */ #headingDiv { position: fixed; left: 0; right: 0; top: 3em; bottom: auto; background-color: peru; display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ } #dynamic { padding: 1%; position: relative; top: 55vh; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <body> <nav id="nav"> <b>Hello</b> </nav> <div id="headingDiv"><h1>greetings</h1></div> <main id="dynamic"> <p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p> <p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p> <p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p><p>ello</p> </main> <script src="main.js"></script> </body>
你是否考慮到窗口的滾動位置？
elem.offsetTop將為您提供頁面頂部的偏移量。 window.scrollTop將為您提供從頁面頂部查看內容的偏移量。 因此elem.offsetTop - window.scrollTop將為您提供從視口頂部開始的元素頂部有多少像素，並將所有這些像素考慮在內。
你得到了動態div的頂部位置，它是從窗口頂部開始測量的...但是然后使用它來設置標題的底部。 “bottom”css屬性是從窗口或頁面的底部開始測量的 。
當#dynamic靠近窗口頂部時，它會變小（例如20px）。 但是你希望標題的底部遠離窗口的底部（距離底部20px）。 所以你需要從另一個中減去一個。
window.innerHeight - dynamic.getBoundingClientRect().top;
如何獲得內部SVG元素相對於外部SVG元素視口的位置？
[英]How do I get an internal SVG element's position relative to the viewport of an outer SVG element?
如何獲取元素相對於瀏覽器視口的頂部 position？
[英]How to get an element's top position relative to the browser's viewport?
使用Javascript，如何縮放相對於視口中心的元素？
[英]Using Javascript, how can I scale an element relative to the center of a viewport?
如何獲取 iframe 相對於頂部窗口視口的位置？
[英]How to get the position of an iframe relative to the top window's viewport?
如何在 javascript 中獲得相對於 window 視口的鼠標 position？
[英]How to get the mouse position relative to the window viewport in javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.