Change appearance of sticky element when it reaches sticky position

user_1045755 0
Viewed 1717

I have create a bottom div that is present all the time when scrolling the site. Its "natural" stop is right after the footer. When I do scroll, and it's not at the footer, it is a bit transparent. However, what I would like to do is when the sticky div reaches the bottom (i.e. its "true" position), then the background changes or something like that.

Is that possible WITHOUT using JS or something like that ?

Updated with a fiddle:

https://jsfiddle.net/octvg6mn/

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;
}

So as you can see in the fiddle, the sticky has a light opacity while scrolling, but when I reach the bottom, where it is supposed to be, I would like it to turn the opacity into 1.0 or something like, just like when hovering the mouse.

sticky position css
1 Answers

You can apply an opaque background to the container to simulate this. When the sticky element will reach the bottom that background will hide the transparency:

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

user_86203330
Related