css 具有相对于底部的粘性位置的Div在滚动时四处跳转

efzxgjgh 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(139)

这是我在Chrome移动的（Android）上观察到的现象。如果我有一个div，它使用sticky作为position属性，并且相对于底部定位，那么当页面第一次加载时，div将正确对齐，但当滚动页面以隐藏浏览器的导航栏时，div将跳起来，不再与底部对齐。
下面是一个示例，使用此div

<div style="background-color: red; position: sticky; bottom: 0">Hello world!</div>

第一节第一节第一节第一节第一次
我怀疑在调整视区大小后，位置不会重新计算。这是一个bug还是预期行为？触发div重新定位的好方法是什么（最好不使用JS）？

css

来源：https://stackoverflow.com/questions/73891040/div-with-sticky-position-relative-to-the-bottom-jumps-around-when-scrolling

1条答案

按热度按时间

oyjwcjzk1#

没有JS，我无法找到一个解决方案，所以这大概是我目前使用的。
在不想粘在底部的div中，我添加了一个位置固定、颜色透明的div

<div id="hiddenDiv" style="position: fixed; color: transparent;"></div>

然后添加一些代码来更改resize事件的内容

var repositionKey = false;

function onResize() {
  repositionKey = !repositionKey;
  document.getElementById("hiddenDiv").innerHTML = repositionKey;
}

addEventListener("resize", onResize);

这似乎触发了父元素的位置重新计算，并将粘性div保持在正确的位置。

赞(0）回复(0）举报 2022-12-30

我来回答

css 具有相对于底部的粘性位置的Div在滚动时四处跳转

1条答案

相关问题

热门标签

最新问答