<header>
  <nav>
    <ul>
      <li><a href="#home">HOME</a></li>
      <li><a href="#about">ABOUT</a></li>
      <li><a href="#service">SERVICES</a></li>
      <li><a href="#contact">CONTACT</a></li>
    </ul>
  </nav>
</header>

<main id="main">
  <div id="home" class="box1"></div>
  <div id="about" class="box2"></div>
  <div id="service" class="box3"></div>
  <div id="contact" class="box4"></div>
</main>

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
}

html {
  scroll-behavior: smooth;
}

header {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: #fff;
  position: fixed;
  background-color: #000;
}

li {
  margin: 0 20px;
  display: inline-block;
  list-style: none;
}

a {
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
}

a:hover {
  color: skyblue;
  transition: all 0.25s ease-in;
}

main .box1 {
  width: 100%;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: none;
  background-attachment: fixed;
}

.box2 {
  width: 100%;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1485291571150-772bcfc10da5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=928&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: none;
  /* background-attachment: fixed; */
}

.box3 {
  width: 100%;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1562911791-c7a97b729ec5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=937&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: none;
  background-attachment: fixed;
}

.box4 {
  width: 100%;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1542362567-b07e54358753?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
  background-size: cover;
  background-position: center;
  background-repeat: none;
  /* background-attachment: fixed; */
}

@media screen and (max-width: 650px) {
  header {
    text-align: center;
  }
}

// hey guys this is a simle parralax effect using css and html . if you want to use javascript you can use it as per your needs.