我的网站上有一个计算器(用php编写(,在这个计算器的最后有一个带有结果的div。
在桌面上它工作正常,但在移动设备上,我想将结果div 固定到底部,直到滚动div 的原始位置。之后,我想将其位置更改为静态。
换句话说,页面上有一个固定的(到底部(元素,滚动后,在div 的原始位置,我想解开它。
我希望,这是可以理解的,但有一个示例页面 - 查看移动版本!!
我该怎么做?
提前感谢!
以下是我过去的做法:
- 获取元素底部的原始位置。
- 获取视区的高度。
- 从原始底部位置减去视口高度,以获得窗口需要滚动到的位置,以便看到完整的元素。
- 向窗口添加滚动侦听器以检查滚动位置并相应地添加/删除固定类。
例:
// Get the document element to use later.
var doc = document.documentElement;
// Get your important message.
var importantMsg = document.getElementById('important-msg');
// Find out how far the bottom of our message is from the top of the page while it's not fixed.
var originalMsgBottom = importantMsg.getBoundingClientRect().bottom;
// Get the window height.
var windowHeight = Math.max(doc.clientHeight, window.innerHeight || 0);
// Get the scroll position we need to check for while srolling.
var scrollPosition = originalMsgBottom - windowHeight;
// Now make your message fixed by default.
importantMsg.className = 'important-msg-fixed';
// Create the function to get the current scroll and see if it is greater than or equal to the position we defined earlier.
var scrollFunction = function() {
var scrollTop = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
if (scrollTop >= scrollPosition) {
importantMsg.className = ''; // If it is, remove the fixed class.
} else {
importantMsg.className = 'important-msg-fixed'; // If it's not, then add it.
}
}
// Make our function run everytime the window is scrolled.
window.addEventListener('scroll', scrollFunction);
#important-msg {
background: #f00;
color: #fff;
padding: 10px;
}
.important-msg-fixed {
position: fixed;
right: 0;
bottom: 0;
left: 0;
margin: 0;
}
<h1>Lorem Ipsum</h1>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p>Scroll Down</p>
<p id="important-msg">Important Message</p>
<p>More Stuff</p>
<p>More Stuff</p>
<p>More Stuff</p>
<p>More Stuff</p>
<p>More Stuff</p>
<p>More Stuff</p>
<p>More Stuff</p>
<p>More Stuff</p>
<p>More Stuff</p>
如果您不关心 IE 浏览器(或者如果您在 2022 年:D阅读本文(
您可以使用position: sticky
.sticky{
position: sticky;
bottom: 0;
background: red;
}
<div class="content">
<p style="border:4px dashed;height:150vh;">Scroll down</p>
<div class="sticky">I'M STICKY</div>
</div>
<div class="content">
<p style="border:4px dashed;height:150vh;">Scroll up</p>
</div>
https://caniuse.com/#feat=css-sticky
如果你想要一个(有点?(回退,你可以:
.sticky{
position: absolute; /* fallback to absolute */
width: 100%; /* fallback width */
position: sticky;
bottom: 0;
background: red;
}