When I scroll the navbar doesn't go out of the div.background. I use position: sticky to make it sticky on top but it only working in first div, when i scroll down it stuck when the first div ends. Can u please help me?

The full code -

HTML

<div >
      <nav>
        <div >
          <div>
            <img src="./photos/Charlie-logo.png" alt="Charlie-logo" />
          </div>
          <ul >
            <li ><a href="">Home</a></li>
            <li ><a href="">Events</a></li>
            <li ><a href="">Contact us!</a></li>
          </ul>
        </div>
      </nav>
    </div>

CodePudding user response：

The problem is caused by the display: flex; parameter of the div containing writings.You can look to this example. Also when I faced this problem, I found this blog. It can be helpful.

CodePudding user response：

That's the naturural intended behaviour of position: sticky.

To always keep an element at the same position, use position: flex and if needed, add a padding-top to its parent element which is as high as the fixed-position element, so that the latter won't overlap anything in the intial position (i.e. before starting to scroll).