到达粘性位置时改变粘性元素的外观

Question

我创建了一个底部 div，当滚动网站时它始终存在。它的 "natural" 停靠点就在页脚之后。当我滚动时，它不在页脚处，它有点透明。然而，我想做的是当粘性 div 到达底部（即它的 "true" 位置），然后背景发生变化或类似的事情。

如果不使用 JS 或类似的东西，这可能吗？

更新为 fiddle:

HTML:

<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>

CSS:

.largeDiv {
  height: 1500px;
  width: 100%;
  background: #cccccc;

}

.stickyDiv {
  position: sticky;
  bottom: 0px;
  text-align: center;
  background: blue;
  color: white;
  opacity: 0.8;
  padding: 25px;
}

.stickyDiv:hover {
  opacity: 1.0;
}

因此，正如您在 fiddle 中看到的那样，粘性在滚动时具有轻微的不透明度，但是当我到达底部时，它应该在的位置，我希望它能将不透明度变为1.0 或类似的东西，就像鼠标悬停时一样。

Answer 1

您可以对容器应用不透明背景来模拟这种情况。当粘性元素到达底部时，背景将隐藏透明度：

.largeDiv {
  height: 1500px;
  width: 100%;
  background: #cccccc;
}

.container {
  background:rgba(0,0,255,1);
}

.stickyDiv {
  position: sticky;
  bottom: 0px;
  text-align: center;
  background:rgba(0,0,255,0.5);
  color: white;
  padding: 25px;
}


.stickyDiv:hover {
  background:rgba(0,0,255,1);
}

<div class="container">
<div class="largeDiv"></div>
<div class="stickyDiv">Test</div>
</div>

到达粘性位置时改变粘性元素的外观

Change appearance of sticky element when it reaches sticky position

css

position

sticky