Question

我正在使用CSS position:sticky;将div粘贴到页面底部。

当元素被贴上时，是否可以更改div 的宽度（或其他内容）？

Answer 1

绝对可以将 width 应用于 position: sticky 的元素。

以下是展示：

的示例

＆＃13;

body {
  height: 500px;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
  width: 50px;
}

＆＃13;

<div class="sticky">Sticky</div>

＆＃13;

但请注意position: sticky的{{3}}不稳定。一些半新版本的Edge，Firefox和Chrome不支持它，而且根本不支持Internet Explorer。

另请注意，即使在有效的浏览器中，如果父元素包含position: sticky或overflow: hidden，overflow: auto也无效。

希望这会有所帮助：）

Answer 2

当目标触及页面底部时，您确实可以使用事件侦听器来调用css。您可以在本指南中找到有用的信息：

https://developers.google.com/web/updates/2017/09/sticky-headers

Answer 3

我为这个问题再做了一个解决方案。它使用与Eric Bidelman's相同的想法，但可以涵盖更多的角落案例。

您需要创建一些其他元素来跟踪粘性标题位置。埃里克称他们为哨兵。在我的解决方案中，它们很简单1px行。

为每个想要观察的粘性面添加一个标记。设置第一个Sentinel top属性等于标题顶部，但使用反向符号减去
例如，如果您的标头有顶部：10px，请将标记标头设置为-11px。您可以使用top：calc(-1px + -1 * var( — header-sticky-top))之类的内容，或者如果标题顶部等于零，则只需设置-1px。
如果需要，添加其他哨兵。
使用交叉观察者观察与哨兵的交叉点。
如果哨兵路口记录有isIntersecting = true，intersectionRatio = 0和intersectionRect.top = rootBounds.top，您可以说标头卡住了。
相同的另一面，只是看底部，左边或右边而不是顶部。
不要忘记将visibility: hidden和pointer-events: none添加到哨兵。

您可以在本文中找到演示和源代码： https://medium.com/@yavanosta/another-event-for-css-position-sticky-445a8d5663a

Css粘性位置事件

3 个答案: