0

Can I make my <nav> scroll to the top of the page and then stay there as the page is scrolled further no matter what – even if it means detaching from its parent? You can see in the code snippet below that it rejoins the flow once I scroll past its parent (which happens very soon)

No JS, please. I don't mind JS, but I can't use it here (not possible)

:root {
  --accent-one-light: hsl(166, 42%, 33%);
  --accent-one-dark: hsl(166, 42%, 23%);
  --accent-two-light: hsl(263, 20%, 59%);
  --accent-two-dark: hsl(263, 20%, 49%);
}

* {
  box-sizing: border-box;
  margin: 0;
  font-family: Arial, sans-serif;
}

@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;
  }
}

#header {
  height: calc(30vh + 5rem);
}

#img-box {
  position: relative;
  width: 100%;
  height: 30vh;
}

#header-img {
  width: 100%;
  height: 100%;
  object-fit: cover;  object-position:  0 30%;
}

h1, h2 {
  text-align: center;
}

nav {
  display: flex;
  justify-content: center;
    align-items: center;
    height: 18vh;
    border-top: 3px solid white;
  background-color: var(--accent-two-light) ;
  position: sticky;
  top: 0;
  z-index: 999;
}

nav ul {
  display: flex;
  /* gap: 0.3rem; */
  justify-content: space-evenly;
  align-items: center;
  height: 100%;
  padding: 0;
  text-align: center;
}

nav li {
  display: inline-block;
  height: 100%;
  padding: 0.4rem;
  vertical-align: middle;
}

nav li:hover {
  background-color: var(--accent-two-dark);
}

.nav-link {
  text-decoration: none;
  color: white;
}

main {
  margin: 2rem auto;
}

section {
  margin-bottom: 1.5rem;
}

p, h2 {
  width: 70%;
  margin: 1rem auto;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Landing</title>
  </head>
  <body>
    <header id="header">
      <figure id="img-box">
      <img id="header-img" src="https://www.adorama.com/alc/wp-content/uploads/2017/11/shutterstock_170805947.jpg">
      </figure>
      <nav>
        <ul>
          <li><a class="nav-link" href="#section-one">Section One</a></li>
          <li><a class="nav-link" href="#section-two">Section Two</a></li>
          <li><a class="nav-link" href="#section-three">Section Three</a></li>
        </ul>
      </nav>
    </header>
    <main>
    <section id="section-one">
      <h2>Section One</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <section id="section-two">
    <h2>Section Two</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    <secton id="section-three">
    <h2>Section Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>
    </main>
    </body>
    </html>
Sergey Zolotarev
  • 379
  • 11

0 Answers0