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

1
votes

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?

2
javascripthtmlcsspositionsticky

2 Answers

2
votes

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>
2
votes

Just similar example to above answer, I worked on it so rather I post it.

body{
margin:0;
padding:0;
}

.container{
margin:0 auto;
height:250px;
width:100px;
margin-top:10px;
position:relative;
padding:0.05px;
}

.img{
width:100%;
height:100%;
position:absolute;
background-color:red;
}

h1{
position:sticky;
top:100px;
margin-top:50px;
}
<body>
<div class="container">
  <div class="img"></div>
  <h1>01<h1>
</div>
<div class="container">
  <div class="img"></div>
  <h1>02<h1>
</div>
<div class="container">
  <div class="img"></div>
  <h1>03<h1>
</div>
<div class="container">
  <div class="img"></div>
  <h1>04<h1>
</div>
<div class="container">
  <div class="img"></div>
  <h1>05<h1>
</div>
</body>