How can i fix it? sticky navbar working only in first div-CodePudding

did i miss something? cause when i scroll down it doesn't go out of div.header
i use position: sticky on to make it sticky on top but it only working in first div, when i scroll down to second div it stuck and doesn't come out.

html, css https://codepen.io/lightmodeusers/pen/OJZvxzW.

i need you advice, thank you. :)

<div >
  <nav>
    <a href="" ><img src="img\logo.svg" width="213" height="42"></a>
    <div >
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a>
          <div >
            <ul>
              <li><a href="">Page 1</a></li>
              <li><a href="">Page 2</a></li>
              <li><a href="">Page 3</a></li>
            </ul>
          </div>
        </li>
        <li><a href="">Product</a></li>
        <li><a href="">CSR</a></li>
        <li><a href="">IS</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </div>
  </nav>
  <div >
    <h1>Welcome </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, reprehenderit?</p>
  </div>
</div>

<div >
  <div >
    <h1>About</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nisi praesentium minima omnis amet quo
      eligendi voluptatem. Aliquam quo, illo nobis vitae consectetur corporis exercitationem soluta tenetur
      natus facere. Vero?</p>
  </div>
</div>

CodePudding user response：

This might not be the best fix, but in your code, the sticky element (navbar) is inside a container (the first div), thus the sticky will stop once the scroll has passed the container. The quickest way to fix this is to move the navbar outside the .header container if possible.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  font-family: "Poppins", sans-serif;
}

.header {
  height: 100vh;
  width: 100%;
  background-image: linear-gradient(rgba(4, 9, 30, 0.5), rgba(4, 9, 30, 0.5)), url("/img/factory1.jpg");
  background-position: center;
  background-size: cover;
  position: relative;
  background-attachment: fixed;
}

nav {
  display: flex;
  padding: 2% 3%;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  transition: 1s ease;
  z-index: 9999;
  border: 1px solid red;
}

.nav-links {
  text-align: center;
}

.nav-links ul li {
  display: inline-block;
  position: relative;
  padding-bottom: 0.3rem;
  margin: 0.5px 16px;
}

.nav-links ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}

.dropdown-menu {
  display: none;
}

.about {
  height: 100vh;
  width: 100%;
  background-color: #fff;
  border: 1px solid red;
}

<nav>
  <a href="" ><img src="img\logo.svg" width="213" height="42"></a>
  <div >
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">About</a>
        <div >
          <ul>
            <li><a href="">Page 1</a></li>
            <li><a href="">Page 2</a></li>
            <li><a href="">Page 3</a></li>
          </ul>
        </div>
      </li>
      <li><a href="">Product</a></li>
      <li><a href="">CSR</a></li>
      <li><a href="">IS</a></li>
      <li><a href="">Contact</a></li>
    </ul>
  </div>
</nav>
<div >

  <div >
    <h1>Welcome </h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, reprehenderit?</p>
  </div>
</div>

<div >
  <div >
    <h1>About</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nisi praesentium minima omnis amet quo eligendi voluptatem. Aliquam quo, illo nobis vitae consectetur corporis exercitationem soluta tenetur natus facere. Vero?</p>
  </div>
</div>

though this causes a problem if you want the background of the navbar to be transparent. If that's the case, you could add a negative margin top to the header element so that part of it could become the background of navbar.

CodePudding user response：

It's because your <nav> is inside of your <div >, so it can't escape it. It's only sticky in reference to the element that it's inside.

Try moving line 1, <div > down to right above <div class=header-info">.