JSFiddle - React, Tailwind, and code Playground

by eget teteete

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.extensions.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.9/fullpage.min.js"></script>
<body>

  <main id="fullpage">
    
    <section class="page-section page top">
      <div class="page-section__wrapper">
        <div class="container">
          <div class="page__content">
            1
          </div>
        </div>
      </div>
    </section>

    <section class="page-section white menu">
      <div class="page-section__wrapper">
        <div class="container">
          <div class="white__info">
            <div class="menu__inner">
              <a class="page__content-logo logo-img" href="index.html">
                <img src="images/logo.png" alt="">
              </a>
              <ul class="menu__list">
                <li class="menu__list-item">
                  <a  class="menu__list-link" href="">ссылка 1</a>
                </li>
                <li class="menu__list-item">
                  <a class="menu__list-link" href="">ссылка 2</a>
                </li>
                <li class="menu__list-item">
                  <a class="menu__list-link" href="">ссылка 3</a>
                </li>
                <li class="menu__list-item">
                  <a class="menu__list-link" href="">ссылка 4</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="page-section about">
      <div class="page-section__wrapper">
        <div class="container">
          <div class="about__inner">
           3
          </div>
        </div>
      </div>
    </section>

    <section class="page-section news">
      <div class="page-section__wrapper">
        <div...

SCSS

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

html,
body {
  height: 100%;
  position: relative;
  overflow-x: hidden;
}

ul,
ol,
li,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
}

button:focus,
input:focus {
  outline: transparent;
}

body{
  font-size: 33px;
  line-height: 1.2;
  color: #000;
  background: #fff;
}

.container{
  max-width: 1600px;
  padding: 0 15px;
  margin: 0 auto;
}

.page-section{
  height: 100vh;
  background: center / cover no-repeat;
  position: relative;
  &__wrapper{
    min-height: 100vh;
    position: relative;
    z-index: 1;
    padding: 65px 0 40px;
  }
}

.title{
  font-size: 88px;
  display: inline-block;
  margin: 50px 0 43px;
  border-bottom: 5px solid #000;
}


.page{
  background: center / cover no-repeat #333;
}




.menu{

  position: sticky;
  top: 0;

  z-index: 5;
  &::before{
    position: absolute;
    content: '';
    bottom: 0;
    left: 0;
    width: 100%;
    height: 89px;
    border-radius: 30px 30px 0 0;
    background: rgba(#b8b8b8, .57);
  }
  &__inner{
    position: absolute;
    bottom: 37px;
    display: flex;
    justify-content: space-between;
  }
  &__coppy{
    position: absolute;
    bottom: -5px;
    right: -185px;
    font-size: 21px;
    font-weight: 600;
  }
}
.menu__list{
  margin-left: 55px;
  &-item{
    display: inline-block;
    &+&{
      margin-left: 60px;
    }
  }
  &-link{
    font-size: 20px;
    color: #000;
    border-bottom: 4px solid #000;
  }
}


.about{
  height: 100vh;
}

JavaScript

/* $(function() {
  $('#fullpage').fullpage({
    autoScrolling: true,
    scrollHorizontally: true,
    sectionSelector: '.page-section'
  });

}); */
window.addEventListener('scroll', function() {
  document.getElementById('showScroll').innerHTML = pageYOffset + 'px';
});