1

I have a div in my website and have another div inside it, I gave the inner div position sticky and top:0 but it doesn't work! This is my code example:

Above : container is a normal div and inner div has a sticky position and top: 0 But it doesn't work. Any suggestions to solve this!

.sticky-div{
      background: #fed700;
      position: sticky;
      top: 0;
    }
    <div class="container">
      <nav>
        <li>item1</li>
        <li>item1</li>
      </nav>
      <div class="sticky-div">
        Sticky
      </div>
    </div>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
    <p>text</p>
Abdallah M Yassin
  • 81
  • 1
  • 9
  • Please share your source code with html and css – Roman Gavrilov Mar 12 '21 at 19:09
  • @GeorgeMa Here it is, but note that i want the inner div sticky not the parent – Abdallah M Yassin Mar 12 '21 at 19:15
  • Does this answer your question? [Position: sticky behavior on a child element whilst the parent is not sticky?](https://stackoverflow.com/questions/44342843/position-sticky-behavior-on-a-child-element-whilst-the-parent-is-not-sticky) – Rojo Mar 12 '21 at 19:18
  • 1
    The element will be sticky while scrolling inside its container. Right now your sticky element won't 'stick' because its container is not scrolling, its probably the body that's scrolling. – Sjors Mar 12 '21 at 19:18
  • @Rojo No, I have the same problem but there is no solution for it – Abdallah M Yassin Mar 12 '21 at 19:19
  • @Sjors Ok, but what is the solution to do this – Abdallah M Yassin Mar 12 '21 at 19:20
  • Exactly. And there won't be a solution using sticky. You need to use JS to get the scroll amount and apply different positions like fixed and absolute – Rojo Mar 12 '21 at 19:21
  • @Rojo Speak politely and just answer if you know the answer and don't speak that way – Abdallah M Yassin Mar 12 '21 at 19:22
  • I think this has the best answer https://stackoverflow.com/questions/53131200/why-sticky-position-does-not-work-in-child-div – sallf Mar 12 '21 at 19:27

3 Answers3

0

You just need to remove the surrounding container div or make that div sticky.

Malynch
  • 1
0

I believe the sticky positioning will only work if the container that it lays within has stick positions on it.

If you'd like for it to work how it should do this:

* {
  padding: 0;
  margin: 0;
}

.sticky-div,
.stickyContainer {
  background: #fed700;
}

.stickyContainer {
  position: sticky;
}
<div class="sticky-div">
  Sticky
</div>
<p>text</p>
<p>text</p>

<div class="stickyContainer">
  Sticky
</div>
<p>text</p>
<p>text</p>
Daweed
  • 1,419
  • 1
  • 9
  • 24
0

It is positioned according to the user's scrolling position. But all the content must be in the same container, you can either put the texts inside the container or move the sticky element out the container

.sticky-div{
  background: #fed700;
  position: sticky;
  top: 0;
}
<div class="container">
  <div class="sticky-div">
    Sticky
  </div>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
  <p>text</p>
</div>
David Arruelas
  • 1
  • 1