Fix div when it's scrolled to

Question

I have a sticky div in the middle of the screen. As user scrolls down the div scrolls down also. I require slightly different behavior.

The div has to be stuck and scrolled down with page as soon as the top of the page reaches this sticky div.

Is it possible to achieve this with only pure CSS, or do I need to use jQuery as well?

.container {
  height: 1500px;
  background-color: gray;
}

.badge {
  position: fixed;
  width: 270px;
  height: 100px;
  text-align: left;
  background-color: green;
  overflow: hidden;
  z-index: 1020;
  right: -6%;
  top: 30%;
}

.badge .badge-text {
  position: absolute;
  color: #ffffff;
}

.badge .text1,
.badge .text3 {
  font-weight: bold;
  font-size: 1rem;
}

<div class="container">
  <div class="badge">
    <div class="badge-text">
      <span class=" text1">TEXT 1</span><br>
      <span>TEXT 2 </span><br/>
      <span class="text3">TEXT 3</span>
    </div>
  </div>
</div>

Fiddle: http://jsfiddle.net/mLzevpy3/

You need to use JS/jQuery to fix the div when it's scrolled to, as CSS does not know where the current scroll position is. As such this is a duplicate, see that question for more details — Rory McCrossan, Mar 15 '19 at 13:02
It is possible with jQuery. Use thist demo: https://www.virendrachandak.com/techtalk/make-a-div-stick-to-top-when-scrolled-to/ — pr0cz, Mar 15 '19 at 13:03
@RoryMcCrossan What about `position: sticky`? https://jsfiddle.net/r9m8je5u/ *(I re-commented this with a better example)*. I feel this question deserves a better answer than the duplicate provides, and as such I'm voting to reopen. — Tyler Roper, Mar 15 '19 at 15:06
In that case it would be better to add a new, updated, answer to the dupe so that it becomes a canonical reference. That being said, `position: sticky` is completely unsupported in IE, so I wouldn't recommend its use. — Rory McCrossan, Mar 15 '19 at 15:45
@RoryMcCrossan Normally I'd agree with answering the duplicate, but my point is that *it isn't a duplicate*. The last line of this question is *"Is it possible to achieve this with only pure CSS?"*. The last line of the marked duplicate is *"How can this be achieved with jQuery?"*. — Tyler Roper, Mar 15 '19 at 16:31
@RoryMcCrossan I'm re-writing my previous comment as it came off a bit more hostile than I intended to, and I apologize for that if you'd already read it. However to restate, I fail to see how the answer is *"it's not possible with CSS"* when I've proven above that it most certainly *is* possible. — Tyler Roper, Mar 15 '19 at 17:55
You're right. My apologies. I would reopen this question for you to answer, but the mobile app doesn't give me the opportunity — Rory McCrossan, Mar 15 '19 at 18:24
@RoryMcCrossan No worries. I'd imagine if OP were still following up he could use the link above as a reference anyways. Thanks Rory. — Tyler Roper, Mar 15 '19 at 18:28
I've achieved the goal with jquery, thanks for that. But it is still interesting to know, what are alternatives. — A. Volg, Mar 16 '19 at 16:22

Fix div when it's scrolled to

0 Answers0