獲取固定 div 容器內元素的絕對 position
[英]Getting absolute position of elements inside fixed div container
問題描述
我有一個頁面列表和一個容器以及每個頁面的鏈接列表，我正在使用 jquery 的animate() function 使用頁面的offset().top值移動到所需的頁面，它第一次工作但在那之后，如果我點擊另一個頁面的鏈接，offset().top 位置就不一樣了，它開始做奇怪的事情......
這是顯示問題的代碼片段
<html> <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> </head> <body style="margin: 0px; padding: 0px; background-color: #AFAFAF;"> <div style="position: fixed; top: 0; left: 0; background-color: white; width: 100px; height: 120px; z-index: 99"> <a href="#" onclick="goToPage(1);">Go to page 1</a><br> <a href="#" onclick="goToPage(2);">Go to page 2</a><br> <a href="#" onclick="goToPage(3);">Go to page 3</a><br> <a href="#" onclick="goToPage(4);">Go to page 4</a><br> <a href="#" onclick="goToPage(5);">Go to page 5</a><br> <a href="#" onclick="goToPage(6);">Go to page 6</a> </div> <div id="divContainer"> <div id="fixedContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"> <div id="pageContainer" style="margin: 0 auto; height: 100%; max-width: 800px; position: relative; overflow-y: scroll; transition: all 0.3s ease-out 0s;"> <div id="page1" style="position: relative; height: 1200px; background-color: lightblue;"> </div> <div id="page2" style="position: relative; height: 1200px; background-color: lightcoral;"> </div> <div id="page3" style="position: relative; height: 1200px; background-color: lightcyan;"> </div> <div id="page4" style="position: relative; height: 1200px; background-color: lightgoldenrodyellow;"> </div> <div id="page5" style="position: relative; height: 1200px; background-color: lightgray;"> </div> <div id="page6" style="position: relative; height: 1200px; background-color: lightgreen;"> </div> </div> </div> </div> <script> function goToPage(elementId) { $('#pageContainer').animate({ scrollTop: $('#page' + elementId).offset().top }, 1200); } </script> </body> </html>
期望的結果將是在頁面之間無縫移動，而不修改實際結構將是最好的。
1 個解決方案
解決方案1
1 已采納 2020-06-18 20:08:07
您需要考慮position()而不是offset()並且您不應該即時執行此操作，而只能在頁面加載時執行一次。
您可以嘗試如下：
$("#pageContainer > div").each(function() { $(this).attr("offset",$(this).position().top); }) function goToPage(elementId) { $('#pageContainer').animate({ scrollTop: $('#page' + elementId).attr('offset') }, 1200); }
<html> <head> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> </head> <body style="margin: 0px; padding: 0px; background-color: #AFAFAF;"> <div style="position: fixed; top: 0; left: 0; background-color: white; width: 100px; height: 120px; z-index: 99"> <a href="#" onclick="goToPage(1);">Go to page 1</a><br> <a href="#" onclick="goToPage(2);">Go to page 2</a><br> <a href="#" onclick="goToPage(3);">Go to page 3</a><br> <a href="#" onclick="goToPage(4);">Go to page 4</a><br> <a href="#" onclick="goToPage(5);">Go to page 5</a><br> <a href="#" onclick="goToPage(6);">Go to page 6</a> </div> <div id="divContainer"> <div id="fixedContainer" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0;"> <div id="pageContainer" style="margin: 0 auto; height: 100%; max-width: 800px; position: relative; overflow-y: scroll; transition: all 0.3s ease-out 0s;"> <div id="page1" style="position: relative; height: 1200px; background-color: lightblue;"> </div> <div id="page2" style="position: relative; height: 1200px; background-color: lightcoral;"> </div> <div id="page3" style="position: relative; height: 1200px; background-color: lightcyan;"> </div> <div id="page4" style="position: relative; height: 1200px; background-color: lightgoldenrodyellow;"> </div> <div id="page5" style="position: relative; height: 1200px; background-color: lightgray;"> </div> <div id="page6" style="position: relative; height: 1200px; background-color: lightgreen;"> </div> </div> </div> </div> <script> </script> </body> </html>
.position()方法允許我們檢索元素（特別是其邊距框）相對於偏移父級（特別是其填充框，不包括邊距和邊框）的當前 position。 將此與.offset()進行對比，后者檢索相對於文檔的當前 position。 當將新元素定位在另一個元素附近並在同一個包含 DOM 元素內時，.position()更有用。 參考
位置：絕對div在另一個位置：絕對div中，並使它們處於位置：固定
[英]Position:absolute div inside another position:absolute div and making them position:fixed
在“Position:Relative”容器 Div 中垂直“固定”和水平“絕對”定位 Div
[英]Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div
包含在可變高度容器 div 內的固定位置元素
[英]Fixed position element contained inside of container div of variable height
在固定Div內的相對DIV內的絕對DIV在滾動時消失
[英]Absolute DIV inside a relative DIV inside a fixed Div disappears on scroll
引導容器流體元素在 position 絕對的下拉菜單中丟失布局
[英]Bootstrap container fluid elements loses layout inside drop down menu with position absolute
div在滾動期間在position：fixed和position：absolute之間切換
[英]div shifting between position:fixed and position:absolute during scrolling
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.