position sticky

$(document).ready(function() { 
  $("a[href*='#']").on("click", function(e) { 
    var anchor = $(this); 
    $('html, body').stop().animate({ 
      scrollTop: $(anchor.attr('href')).offset().top 
    }, 777); 
    e.preventDefault(); 
    return false; 
  }); 
});

/* SASS 
                CSS №1 
            body 
                max-width: 100%   
            * 
                cursor: default  
                margin: 0 
                padding: 0 
                font-family: 'Open Sans', sans 
                 
                text-decoration: none  
                 
             
            .in_header 
                position: fixed 
                width: 270px 
                height: 100% 
                background: linear-gradient(to top, #007ad8, #0984e3) 
                display: flex  
                justify-content: center   
                align-items: center   
                flex-direction: column  
               
                img 
                    height: 200px 
                    border-radius: 50% 
                    border: solid 8px #74b9ff 
                ul  
                    margin: 0   
                    padding: 0   
                    li  
                        list-style: none 
                        font-size: 20px 
                        font-weight: bold 
                        text-align: center 
                        margin: 20px 0 
                        a  
                            color: #bfdfff 
                            position: relative 
                            padding: 5px 
                            display: block 
                            transition: all 0.5s ease 
                            text-transform: uppercase 
                ul:hover li a  
                    transform: scale(1.2) 
                    transition: all 0.5s ease 
                    opacity: .2 
                    filter: blur(5px) 
                    color: white 
                ul li a:hover  
                    transform: scale(1.6) 
                    transition: all 0.5s ease 
                    opacity: 1 
                    filter: blur(0) 
                ul li a:before 
                    content: '' 
                    position: absolute 
                    left: 0  
                    top: 0 
                    width: 100% 
                    height: 100% 
             
            section 
                position: sticky 
                top: 0 
                margin-left: 270px 
                height: 100% 
                background: white 
            section:before  
                content: '' 
                width: 100% 
                height: 100% 
                z-index: -1 
                box-shadow:  0 -50px 50px 50px #636e72 
            .content  
                margin: 0 5vw 
                max-width: 80% 
                height: 100vh 
                border-top: 2px solid #dfe6e9 
                align-items: center 
                display: flex 
            .info  
                font-size: 20px 
                color: #818181 
            h1  
                color: #0984e3 
                font-size: 60px 
                font-weight: bolder 
                .h1_color 
                    color: #636e72 
            #s1 
                ul  
                    display: flex 
                    li 
                        list-style: none 
                        .mail  
                            color: #0984e3 
                            font-size: 20px 
                            margin-left: 10px 
                        .tel  
                            color: #636e72 
                            font-size: 20px 
                div 
                    display: flex 
                    flex-direction: column 
                    .vk_link 
                        width: 70px 
                        height: 70px 
                        a  
                            width: 40px 
                            height: 40px 
                            border-radius: 50% 
                            padding: 5px 
                            margin: 10px 0 
                            position: relative 
                            overflow: hidden 
                            border: 2px solid #636e72 
                            color: #636e72 
                            display: flex 
                            justify-content: center 
                            align-items: center 
                             
                            font-size: 35px 
                            transition: all 0.5s ease 
                        a:hover  
                            color: white 
                            box-shadow: 0 0 10px #0984e3 
                            border: none 
                            transform: scale(1.2) 
            .vk_link 
                a:before 
                    content: '' 
                    position: absolute 
                    top: 0 
                    left: 0 
                    width: 0 
                    height: 100% 
                    background: #0984e3 
                    z-index: -1 
                    transition: all 0.5s ease 
                a:hover::before 
                    width: 100% 
                    transition: all 0.5s ease 
            #s2  
                i 
                    font-size: 50px 
                    color: #636e72 
                    margin-right: 20px 
            h2  
                color: #636e72 
                margin: 20px 0          
            #s3 
                div  
                    div 
                        width: 50px 
                        height: 50px 
                        background: #636e72 
                        display: flex 
                        justify-content: center   
                        align-items: center  
                        border-radius: 50% 
                        margin-top: 20px 
                        transition: all 0.5s ease 
                        a 
                            display: flex 
                            justify-content: center   
                            align-items: center  
                            i 
                                font-size: 45px 
                                color: white 
                                margin: 3px 9px 0 0 
                    div:hover 
                        background: linear-gradient(to top, #0e80b2, #0e1a30) 
                        box-shadow:  0 -50px 50px 50px #636e72 
                        transform: scale(1.2)     
                        transition: all 0.5s ease     
            #s4 
                display: flex 
                flex-direction: column 
                .error 
                    color:  #0984e3 
                    font-size: 30vw 
                    font-weight: bold 
                 
                 
                 
                 
                 
            @media screen and (max-width: 768px) 
                nav ul li  
                    display: none 
             
                .all_margin_left 
                     margin: 0 
                .in_header 
                    position: static 
             
            CSS №2 
            .hidden-menu a { 
              color: rgb(134, 182, 255); 
              text-decoration: none !important; 
            } 
            .hidden-menu a:hover { 
              color: white; 
              transition: all 0.3s; 
            } 
            .hidden-menu { 
              text-align: center; 
              font-size: 20px; 
              font-weight: bold; 
              display: block; 
              position: fixed; 
              list-style: none; 
              padding: 10px; 
              margin: 0; 
              box-sizing: border-box; 
              width: 270px; 
              background: linear-gradient(to top, #1155bb, #1975ff); 
              height: 100%; 
              top: 0; 
              left: -270px; 
              transition: left 0.2s; 
              z-index: 2; 
              -webkit-transform: translateZ(0); 
              -webkit-backface-visibility: hidden; 
            } 
            .hidden-menu-ticker { 
              display: none; 
            } 
            .btn-menu { 
              border-radius: 2px; 
              background-color: #4992ff; 
              padding: 5px; 
              position: fixed; 
              top: 5px; 
              left: 5px; 
              transition: left 0.23s; 
              z-index: 3; 
              width: 30px; 
              -webkit-transform: translateZ(0); 
              -webkit-backface-visibility: hidden; 
            } 
            .btn-menu span { 
              display: block; 
              height: 3px; 
              background-color: #b8d4ff; 
              margin: 7px 0 0; 
              transition: all 0.1s linear 0.23s; 
              position: relative; 
            } 
            .btn-menu span.first { 
              margin-top: 0; 
            } 
            .hidden-menu-ticker:checked ~ .btn-menu { 
              left: 230px; 
            } 
            .hidden-menu-ticker:checked ~ .hidden-menu { 
              left: 0; 
            } 
            .hidden-menu-ticker:checked ~ .btn-menu span.first { 
              -webkit-transform: rotate(45deg); 
              top: 10px; 
            } 
            .hidden-menu-ticker:checked ~ .btn-menu span.second { 
              opacity: 0; 
            } 
            .hidden-menu-ticker:checked ~ .btn-menu span.third { 
              -webkit-transform: rotate(-45deg); 
              top: -10px; 
            } 
            @media screen and (min-width: 768px) { 
              .btn-menu { 
                display: none; 
              } 
               
            } 
            @media screen and (max-width: 768px) { 
              nav ul li { 
                display: none; 
              } 
              .all_margin_left { 
                margin: 0 !important; 
              } 
              .in_header{ 
                height: auto !important; 
                width: 100% !important; 
                position: inherit; 
                color: rgb(116, 116, 116) 
              } 
              header div img { 
                margin: 10px; 
              } 
            }

<header> 
  <div class="in_header "> 
    <img src="app/img/f1.jpg" alt="" /> 
    <nav> 
      <ul> 
        <li><a href="#s1">О себе</a></li> 
        <li><a href="#s2">Что я умею</a></li> 
        <li><a href="#s3">Интересы</a></li> 
        <li><a href="#s4">Опыт</a></li> 
        <li><a href="#s5">Информация</a></li> 
      </ul> 
    </nav> 
  </div> 
</header> 
<section> 
  <input type="checkbox" id="hmt" class="hidden-menu-ticker" /> 
  <label class="btn-menu" for="hmt"> 
                            <span class="first"></span> 
                            <span class="second"></span> 
                            <span class="third"></span> 
                          </label> 
  <ul class="hidden-menu"> 
    <li><a href="#s1">О себе</a></li> 
    <li><a href="#s2">Что я умею</a></li> 
    <li><a href="#s3">Интересы</a></li> 
    <li><a href="#s4">Опыт</a> </li> 
    <li><a href="#s4">Информация</a></li> 
  </ul> 
</section> 
<section> 
  <div class="content  section_first" id="s1"> 
    <div> 
      <h1><span class="h1_color">Bulat</span> Mustafin</h1> 
      <ul> 
        <li> 
          <a href="tel:+79631322869" class="tel">+7 (963) 132-28-69</a> 
        </li> 
        <li> 
          <a href="mailto:damask161092@gmail.com" class="mail">damask161092@gmail.com</a 
                                  > 
                                </li> 
                              </ul> 
                              <p class="info">Hачинающий веб разработчик.</p> 
                              <div class="vk_link"> 
                                <a href="https://vk.com/im?peers=204230450_202106715_104516837&sel=101730206" target="_blank" > 
                                  <i class="fab fa-vk"></i></a> 
    </div> 
  </div> 
  </div> 
</section> 
<section> 
  <div class="content" id="s2"> 
    <div> 
      <h2>Что я умею</h2> 
      <p class="info"> 
        На данный момент я владею html , CSS, практиковал Sass. Немного изучал Java синтаксис которого схож с PHP, JavaScript это позволяет мне немного понимать написанное на этих языках и делать небольшие исправления. Также на уровне любителя я владею photoshop 
        и illustrator 
      </p> 
      <br /> 
      <i class="fab fa-html5"></i> 
      <i class="fab fa-css3-alt"></i> 
      <i class="fab fa-sass"></i> 
      <i class="fab fa-adobe"></i> 
    </div> 
  </div> 
</section> 
<section> 
  <div class="content" id="s3"> 
    <div> 
      <h2>Интересы</h2> 
      <p class="info">Интересы у меня вполне обычные, это Видео игры</p> 
      <div> 
        <a href="https://steamcommunity.com/profiles/76561198866394726" target="_blank"><br> 
          <i class="fab fa-steam-symbol"></i></a> 
      </div> 
    </div> 
  </div> 
</section> 
<section> 
  <div class="content" id="s4"> 
    <p class="error">404</p> 
    <p class="info">Информация не найдена зайдите по позже</p> 
  </div> 
</section> 
<section> 
  <div class="content " id="s5"> 
    <p class="info">Сайт написан на Visual Studio Code. При написаний использован препроцессор Sass, скомпилироанный с помощью таск менеджера gulp, с помощью него же уменьшен вес. Верстка посажена на WordPress</p> 
  </div> 
</section> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>