Skip to content

CSS: How to make sticky element stick not to the top of the page but to a specific pixel or position?

Luis Couto

img1

I want the “+01” element to follow the image div while someone is scrolling, but I don’t know how to make it so that it starts moving downwards before it hits the top of the page. Is there a simple solution to this?

Advertisement

Answer

If I understand your question correctly, I think you may be aiming for sticky position. More info

I have made this example based in your image for you. Hope it helps:

body {margin:0; padding:0; background-color:orange;}
.container {
  position:relative;
  margin:0 auto;
  width:400px;
  margin-top:20px;
  margin-bottom:40px;
}
img {
  width:100%;
  display:block;
  margin-top:-40px;
}
.number {
  position:sticky;
  top:30px;
  margin-left:-40px;
  font-size:40px;
  color:#fff;
  text-shadow: 2px 2px 3px rgba(0,0,0,0.8);
  font-weight:bold;
  
}
<div class="container">
  <div class="number">
      +01
    </div>
    <img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">

</div>
<div class="container">
  <div class="number">
      +02
    </div>
    <img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">

</div>
<div class="container">
  <div class="number">
      +03
    </div>
    <img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">

</div>
<div class="container">
  <div class="number">
      +04
    </div>
    <img src="https://image.shutterstock.com/image-vector/greece-parthenon-sketch-600w-78255484.jpg" alt="">

</div>