获取固定 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.