The next section of the page always appears on top of the first one-CodePudding

Creating a simple product landing page, I'm done with the first part of the webpage. When i try to write a new section for "Why fly with us" that ideally a user would scroll down to from the first part, every new element appears on top of the first part.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.nav-container {
  height: 70px;
  background-color: rgb(0, 221, 221);
}

.navbar {
  display: grid;
  grid-template-columns: 0.2fr auto 1fr;
  align-items: center;
  height: 80px;
  width: 90%;
  max-width: 1720px;
  margin: 0 auto;
}

#navbar-logo {
  color: white;
  justify-self: start;
}

#navbar-logo {
  cursor: pointer
}

.nav-menu {
  display: grid;
  grid-template-columns: repeat(5, auto);
  list-style: none;
  font-size: 1.2rem;
  text-align: center;
  width: 50%;
  justify-self: end;
}

.nav-links {
  color: white
}

.nav-links:hover {
  color: #f9e506;
  transition: all 0.3s ease-out;
}

.nav-links-btn {
  background-color: #f9e506;
  padding: 6px 16px;
  border-radius: 4px;
}

.nav-links-btn:hover {
  background-color: transparent;
  color: white;
  padding: 5px 15px;
  border-radius: 4px;
  border: solid 1px #f9e506;
  transition: all 0.3s ease-out;
}

.container {
  position: fixed;
  top: 38%;
  left: 32%;
  text-align: center;
}

h1 {
  color: white;
  font-size: 5rem;
  margin: 0 0 1rem;
  @media (max-width: $bp-s) {
    font-size: 2rem;
  }
}

h2 {
  color: white;
  font-weight: 300;
  font-size: 2.2rem;
  margin: 0 0 1rem;
  @media (max-width: $bp-s) {
    font-size: 1.5rem;
  }
}

h3 {
  color: white;
  font-weight: 300;
  font-size: 2.5rem;
  margin: 0 0 1rem;
  @media (max-width: $bp-s) {
    font-size: 1.5rem;
  }
}

html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  background-image: url("61766.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Heebo', sans-serif;
  font-size: 100%;
  line-height: 1.45;
}

.btn {
  width: 300px;
  height: 80px;
  border: none;
  color: aqua;
  background-color: #04d9ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #f9e506;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
}

.btn:hover {
  box-shadow: inset 300px 0 0 0 #f9e506;
  cursor: pointer;
  color: #000;
}

.description {
  background-color: aliceblue;
}

<body>
  <header>
    <div >
      <nav >
        <h3 id="navbar-logo">iTravel</h3>
        <div  id="mobile-menu">
          <span ></span>
          <span ></span>
          <span ></span>
        </div>
        <ul >
          <li><a href="#" >Home</a></li>
          <li><a href="#" >Flights</a></li>
          <li><a href="#" >Hotels</a></li>
          <li><a href="#" >My Bookings</a></li>
          <li><a href="#" >Log In</a></li>
        </ul>
      </nav>
    </div>
    <div >
      <h1>iTravel</h1>
      <h2>Travelling has never been easier</h2>
      <button ><a href="#">Book Flights Now</a></button>
    </div>
  </header>

  <div>
    <section >
      <h4>Why fly with us?</h4>
      <p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning..
      </p>
    </section>
  </div>
</body>

I thought I might've failed to close a html tag but i've checked thoroughly and that's not the case. I've tried putting the next part in a div, I've also tried using the section tag but both attempts yielded the same results. I inspected the CSS especially the html and body selectors and even tweaked some of the values but to no avail. I suspect I'm missing a very minute detail and would appreciate a keener more experienced eye could help.

CodePudding user response：

I think this might be what you were trying to accomplish. Basically, if you wrap each of your "sections" in an absolute positioned container (I used section) and then within each section have a fixed position container, you can achieve a parallax scroll effect. Assuming each section is 100vh, the trick is that each container needs to have its top property set to 100vh the top property of the previous section (so the first one is 0, second is 100vh, third is 200vh...). Additionally, each successive section needs a higher z-index.

Run the snippet below and open it in full screen mode to test it out.

/* GLOBAL STYLES */

:root {
 --navBarHeight: 3.5rem;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background-image: url("61766.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  font-family: 'Heebo', sans-serif;
  font-size: 100%;
  line-height: 1.45;
}

h1 {
  font-size: 5rem;
}

h2 {
  font-weight: 300;
  font-size: 2.2rem;
}

h3 {
  font-weight: 300;
  font-size: 2.5rem;
}

a {
  color: inherit;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: white;
}

/* NAVBAR STYLES */

.nav-container {
  color: white;
  background-color: rgb(0, 221, 221);
  position: fixed;
  width: 100%;
  z-index: 1000;
  height: var(--navBarHeight);
  padding: 0 1rem;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#navbar-logo {
  cursor: pointer;
}

.nav-menu {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: .5rem;
}

.nav-links:hover {
  color: #f9e506;
  transition: all 0.3s ease-out;
}

.nav-links-btn {
  background-color: #f9e506;
  padding: 6px 16px;
  border-radius: 4px;
}

.nav-links-btn:hover {
  background-color: transparent;
  color: white;
  padding: 5px 15px;
  border-radius: 4px;
  border: solid 1px #f9e506;
  transition: all 0.3s ease-out;
}

/* MAIN STYLES: PARALLAX SECTIONS */

main {
  position: relative;
}

section {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  clip: rect(0, auto, auto, 0);
  padding: 1rem;
  padding-top: calc(1rem   var(--navBarHeight));
  box-shadow: inset 0 1px 2rem hsl(0 0% 0% / .05);
  background-color: white;
}

.fixed {
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

section:nth-child(1) {
  top: 0;
  z-index: 1;
}

section:nth-child(2) {
  top: 100vh;
  z-index: 2;
}

section:nth-child(3) {
  top: 200vh;
  z-index: 3;
}

section:nth-child(4) {
  top: 300vh;
  z-index: 4;
}

.booknow {
  background-color: white;
}

.description {
  background-color: lightcyan;
}

.findDeals {
  background-color: white;
}

.explore {
  background-color: lightyellow;
}

.btn {
  width: 300px;
  height: 80px;
  border: none;
  color: aqua;
  background-color: #04d9ff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 0 #f9e506;
  transition: ease-out 0.3s;
  font-size: 2rem;
  outline: none;
}

.btn:hover {
  box-shadow: inset 300px 0 0 0 #f9e506;
  cursor: pointer;
  color: #000;
}

  <header>
    <div >
      <nav >
        <h3 id="navbar-logo">iTravel</h3>
        <div  id="mobile-menu">
          <span ></span>
          <span ></span>
          <span ></span>
        </div>
        <ul >
          <li><a href="#" >Home</a></li>
          <li><a href="#" >Flights</a></li>
          <li><a href="#" >Hotels</a></li>
          <li><a href="#" >My Bookings</a></li>
          <li><a href="#" >Log In</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <main>
    <section >
      <div >
        <h1>iTravel</h1>
        <h2>Travelling has never been easier</h2>
        <button ><a href="#">Book Flights Now</a></button>
      </div>
    </section>
    <section >
      <div >
        <h4>Why fly with us?</h4>
        <p>A travel agency like ours offers a one-stop solution for all your travel needs. From finding the perfect destination to planning...</p>
      </div>
    </section>
    <section >
     <div >
       <h4>Check out these deals!</h4>
     </div>
    </section>
    <section >
     <div >
       <h4>Explore destinations</h4>
     </div>
    </section>
  </main>

CodePudding user response：

The main problem here is the positioning used for the first element (.container). With position: absolute & position: fixed the elements are removed from the normal flow of the document.

In other words they take no space during layout calculation and therefore are ignored while placing elements that are in the normal document flow.