根据页面滚动取消固定元素

Question

我的网站上有一个计算器（写在 php 中），在这个计算器的末尾有一个 div 和结果。

在桌面上它工作正常，但在移动设备上，我想将结果 div 固定到底部，直到滚动到 div 的原始位置。之后我想将其位置更改为静态。

换句话说，页面上有一个固定的（到底部）元素，滚动后，在 div 的原始位置，我想取消它。

我希望，这是可以理解的，但是有一个 example page - 看手机版！！！

我该怎么做？

提前致谢！

Answer 1

这是我过去的做法：

获取元素底部的原始位置。
获取视口的高度。
从原始底部位置减去视口高度，得到 window 需要滚动到的位置，以便显示完整元素。
向 window 添加滚动侦听器以检查滚动位置，并 add/remove 相应地固定 class。

示例：

// 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>

Answer 2

如果您不关心 IE 浏览器（或者如果您在 2022 年阅读这篇文章:D）
you can use 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;
}

根据页面滚动取消固定元素

Unstick a fixed element based on page scroll

javascript

css

jquery

sticky