Закрытие бокового меню при скролле вниз и при клике на один из пунктов

$(document).ready(function() { 
 
 //beginning menu clicks 
    $('.menu__handle').click(function () { 
        $('.menu__handle').toggleClass('menu--open'); 
        $('body').toggleClass('for-menu-open'); 
    }); 
//end menu clicks 
 
 
//beginning scroll add/removeClass('active') 
    $(window).scroll(function () { 
        if ($(window).scrollTop() >= 100) { 
            $('.menu__handle--spec').addClass('hide-menu'); 
        }  
        else { 
            $('.menu__handle--spec').removeClass('hide-menu'); 
        } 
    }); 
//end scroll add/removeClass('active') 
 
//beginning menu clicks 
    $('a[href^="."]').click(function () { 
        var scroll_el = $(this).attr('href'); 
        $('.nav__list > li').removeClass('active'); 
        $(this).parent('li').addClass('active'); 
        $('html, body').animate({scrollTop: $(scroll_el).offset().top}, 1000); 
        return false; 
    }); 
//end menu clicks 
 
//beginning menu clicks 
    $('a[href^="#"]').click(function () { 
        var scroll_el = $(this).attr('href'); 
        $('.screen__inner__header__content > li').removeClass('active'); 
        $(this).parent('li').addClass('active'); 
        $('.screen__inner__header').removeClass('active'); 
        $('html, body').animate({scrollTop: $(scroll_el).offset().top - 62}, 1000); 
        return false; 
    }); 
//end menu clicks 
 
 
});

.screen__inner__header{ 
    margin: 0 auto; 
    width: 100%; 
    display: flex; 
    display: -webkit-flex; 
    flex-flow: nowrap; 
    -webkit-flex-flow: nowrap; 
    flex-direction: column; 
    -webkit-flex-direction: column; 
    align-items: center; 
    -webkit-align-items: center; 
    justify-content: flex-start; 
    -webkit-justify-content: flex-start; 
    position: relative; 
    z-index: 1; 
    background: transparent; 
    position: fixed; 
    padding: 45px 5px 20px; 
} 
.nav__list__text { 
    margin: 0; 
} 
.screen__inner__header.sticky { 
    margin: 0 auto; 
    width: 100%; 
    height: 90px; 
    background-image: linear-gradient( 135deg, #7dd6bd 10%, #4eb99b 100%); 
    padding: 2px; 
    position: fixed; 
} 
 
/*beginning nav*/ 
.nav{ 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    width: 300px; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.78); 
    z-index: 2; 
    -webkit-transform: translate3d(300px, 0, 0); 
    transform: translate3d(300px, 0, 0); 
    transition: transform 0.6s; 
    transition: transform 0.6s ease 0.3s; 
} 
 
.for-menu-open .nav { 
    -webkit-transform: translate3d(0, 0, 0); 
    transform: translate3d(0, 0, 0); 
    transition: transform 0.6s ease 0s; 
} 
 
.nav__list{ 
    margin: 43px 0px 0px 20px; 
} 
 
.nav__list > li{ 
    font-size: 0px; 
    position: relative; 
    padding: 2px; 
    transition: 0.6s ease 0s; 
    transform: translate(100%); 
    -webkit-transform: translate(100%); 
} 
 
.nav__list > li:nth-child(1){ 
    transition: 0.6s ease 0s; 
} 
 
.nav__list > li:nth-child(2){ 
    transition: 0.6s ease 0.1s; 
} 
 
.nav__list > li:nth-child(3){ 
    transition: 0.6s ease 0.2s; 
} 
 
.nav__list > li:nth-child(4){ 
    transition: 0.6s ease 0.3s; 
} 
 
.nav__list > li:nth-child(5){ 
    transition: 0.6s ease 0.3s; 
} 
 
.for-menu-open .nav > .nav__list > li{ 
    transform: translate(0%); 
    -webkit-transform: translate(0%); 
} 
 
.nav__list__line, .nav__list__text{ 
    display: inline-block; 
    vertical-align: middle; 
} 
 
.nav__list__line{ 
    width: 8px; 
    height: 4px; 
    background: #FFDD2D; 
    transition: 0.3s ease 0s; 
} 
 
.nav__list > li:hover .nav__list__line, .nav__list > li.active .nav__list__line{ 
    background: #000; 
    transform: translateX(5px); 
    -webkit-transform: translateX(5px); 
} 
 
.nav__list__text{ 
    font-family: 'gothampro-black'; 
    font-size: 18px; 
    color: #000; 
    margin-left: 10px; 
    transition: 0.3s ease 0s; 
} 
 
.nav__list > li:hover .nav__list__text, .nav__list > li.active .nav__list__text{ 
    color: #FFDD2D; 
    transform: translateX(5px); 
    -webkit-transform: translateX(5px); 
} 
 
.nav__list > li > a{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
/*end nav*/ 
/*beginning screen1*/ 
.screen1{ 
    width: 100%; 
    height: 100vh; 
    position: relative; 
    overflow: hidden; 
    background-color: #fff; 
} 
.screen1.screen1_mobile{ 
    display: none; 
} 
.screen1__video { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 50px; 
    left: 0px; 
    overflow: hidden; 
    /*opacity: 0;*/ 
} 
 
/*body.active .screen1__video { 
    opacity: 1; 
    transition: 3s ease 1s 
}*/ 
 
#video { 
    background-size: auto 100%; 
    width: 1256px; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 50%; 
    transform: translateX(-50%); 
    -webkit-transform: translateX(-50%); 
    z-index: 0; 
} 
 
.itsIe #video { 
    height: auto; 
    top: 20px; 
} 
 
.screen1__mask{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
 
.screen1__mask > svg{ 
    display: block; 
    margin-left: 50%; 
    transform: translate(-50.7%); 
    -webkit-transform: translate(-50.7%); 
} 
 
.screen1__mask__figures{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    /* background: url(../img/mask2.png) no-repeat center bottom #009688; */ 
    /* background: #009688; */ 
    overflow: hidden; 
} 
 
.screen1__mask__figures__inner{ 
    width: 1187px; 
    height: 100%; 
    margin: 0px auto 0px; 
    position: relative; 
    font-size: 0px; 
    text-align: center; 
} 
 
.screen1__mask__figures__inner__img { 
    display: block; 
    position: absolute; 
    opacity: 0; 
    z-index: 1; 
    transition: 2s ease 0s; 
} 
 
.screen1.active .screen1__mask__figures__inner__img{ 
    opacity: 1; 
    transform: translateX(0px); 
    -webkit-transform: translateX(0px); 
} 
 
.screen1__mask__figures__inner__img1{ 
    top: 61px; 
    left: 216px; 
    transform: translateX(-20%); 
    -webkit-transform: translateX(-20%); 
} 
 
.screen1__mask__figures__inner__img2{ 
    top: 148px; 
    left: 295px; 
    transform: translateX(-20%); 
    -webkit-transform: translateX(-20%); 
} 
 
.screen1__mask__figures__inner__img3{ 
    top: 144px; 
    left: 687px; 
    transform: translateX(20%); 
    -webkit-transform: translateX(20%); 
} 
 
.screen1__mask__figures__inner__img4{ 
    top: 236px; 
    left: 693px; 
    transform: translateX(20%); 
    -webkit-transform: translateX(20%); 
} 
 
.screen1__mask__figures__inner__img5{ 
    top: 212px; 
    left: 896px; 
    transform: translateX(20%); 
    -webkit-transform: translateX(20%); 
} 
 
.screen1__mask__figures__inner__img6{ 
    top: 181px; 
    left: 928px; 
    transform: translateX(20%); 
    -webkit-transform: translateX(20%); 
} 
 
.screen1__mask__figures__inner__img7{ 
    top: 154px; 
    left: 962px; 
    transform: translateX(20%); 
    -webkit-transform: translateX(20%); 
} 
 
.screen1__mask__figures__inner__img8{ 
    top: 252px; 
    left: 171px; 
    transform: translateX(-20%); 
    -webkit-transform: translateX(-20%); 
} 
 
.screen1__mask__figures__inner__img9{ 
    top: 573px; 
    left: 124px; 
    transform: translateX(-20%); 
    -webkit-transform: translateX(-20%); 
} 
 
.screen1__mask__figures__inner__img10{ 
    top: 526px; 
    left: 979px; 
    transform: translateX(20%); 
    -webkit-transform: translateX(20%); 
} 
 
.screen1__mask__figures__inner__img11{ 
    top: 617px; 
    left: 994px; 
    transform: translateX(20%); 
    -webkit-transform: translateX(20%); 
} 
 
.screen1__mask__figures__inner__title { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    font-family: "gothamprobold"; 
    font-size: 154px; 
    letter-spacing: 215px; 
    color: rgba(39, 38, 38, 0.11); 
    opacity: 0; 
    z-index: 0; 
    transition: 2s ease 0s; 
} 
 
.screen1.active .screen1__mask__figures__inner__title{ 
    opacity: 1; 
    letter-spacing: 75px; 
} 
 
.screen__inner{ 
    /*width: 1210px;*/ 
    height: 100%; 
    position: relative; 
    padding-top: 1px; 
    margin: -2px auto 0px; 
} 
 
.for-screen__inner__content{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
} 
 
 
/*menu__handle*/ 
.menu__handle { 
    background: none; 
    border: none; 
    width: 20px; 
    height: 18px; 
    padding: 0; 
    outline: none; 
    position: relative; 
    top: 24px; 
    right: 200px; 
    z-index: 1; 
    cursor: pointer; 
    /* -webkit-transform: translate3d(0px, 0, 0); */ 
    /* transform: translate3d(0px, 0, 0); */ 
    -webkit-transition: -webkit-transform 0.6s; 
    transition: transform 0.6s; 
} 
 
.menu__handle--spec{ 
    position: absolute; 
    top: 41px; 
    left: -31px; 
    opacity: 0; 
    transform: scale(0.5); 
    -webkit-transform: scale(0.5); 
    transition: 0.3s ease 0s; 
} 
 
.menu__handle--spec.hide-menu{ 
    left: -31px; 
    opacity: 1; 
    transform: scale(1); 
    -webkit-transform: scale(1); 
} 
 
.menu__handle *, .menu__handle:after, .menu__handle:before { 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
 
.menu__handle::before, .menu__handle::after, .menu__handle span { 
    background: #4C4C4C; 
} 
 
.menu__handle::before, .menu__handle::after { 
    content: ''; 
    position: absolute; 
    height: 1px; 
    width: 100%; 
    left: 0; 
    top: 50%; 
    -webkit-transform-origin: 50% 50%; 
    transform-origin: 50% 50%; 
    -webkit-transition: -webkit-transform 0.23s; 
    transition: transform 0.23s; 
} 
 
.menu__handle::before { 
    -webkit-transform: translate3d(0, -7px, 0); 
    transform: translate3d(0, -7px, 0); 
} 
 
.menu__handle.menu--open::before { 
    -webkit-transform: rotate3d(0, 0, 1, 45deg); 
    transform: rotate3d(0, 0, 1, 45deg); 
} 
 
.menu__handle span { 
    position: absolute; 
    width: 100%; 
    height: 1px; 
    top: 9px; 
    left: 0; 
    overflow: hidden; 
    text-indent: 200%; 
    -webkit-transition: opacity 0.23s; 
    transition: opacity 0.23s; 
} 
 
.menu__handle.menu--open span { 
    opacity: 0; 
} 
 
.menu__handle::after { 
    -webkit-transform: translate3d(0, 7px, 0); 
    transform: translate3d(0, 7px, 0); 
} 
 
.menu--open.menu__handle::after { 
    -webkit-transform: rotate3d(0, 0, 1, -45deg); 
    transform: rotate3d(0, 0, 1, -45deg); 
} 
/*menu__handle*/

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
  <!--beginning nav--> 
        <div class="nav"> 
            <ul class="nav__list"> 
              <li> 
                  <div class="nav__list__line"></div> 
                  <p class="nav__list__text">О компании</p> 
                  <a href="#b1"></a> 
              </li> 
              <li> 
                  <div class="nav__list__line"></div> 
                  <p class="nav__list__text">Преимущества</p> 
                  <a href="#b2"></a> 
              </li> 
              <li> 
                  <div class="nav__list__line"></div> 
                  <p class="nav__list__text">Услуги</p> 
                  <a href="#b3"></a> 
              </li> 
              <li> 
                  <div class="nav__list__line"></div> 
                  <p class="nav__list__text">Стоимость</p> 
                  <a href="#b4"></a> 
              </li> 
              <li> 
                  <div class="nav__list__line"></div> 
                  <p class="nav__list__text">Почему мы?</p> 
                  <a href="#b5"></a> 
              </li> 
            </ul> 
        </div> 
        <div class="screen1" id="screen1"> 
            <div class="screen__inner"> 
                <div class="screen__inner__header"> 
                    <div class="stic-mnu"> 
                        <button class="menu__handle"><span>Menu</span></button> 
                        <p class="menu__p"></p> 
                    </div> 
                    <div class="screen__inner__header__top"> 
                        <div> 
                            <div> 
                                <!-- <p class="screen__inner__header__top__right__tel">8 (555) 555-55-55</p> --> 
                                <!-- <p class="screen__inner__header__top__right__tel">8 (555) 555-55-55</p> --> 
                            </div> 
                            <div class="screen__inner__header__top__mobile"> 
                                <div class="screen__inner__header__top__mobile__control"> 
                                    <div class="screen__inner__header__top__mobile__control__indoor screen__inner__header__top__mobile__indoor--1"></div> 
                                    <div class="screen__inner__header__top__mobile__control__indoor screen__inner__header__top__mobile__control__indoor--2"></div> 
                                    <div class="screen__inner__header__top__mobile__control__indoor screen__inner__header__top__mobile__control__indoor--3"></div> 
                                </div> 
                            </div> 
                            <div class="screen__inner__header__top__right"> 
                                <div> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
                <div class="for-screen__inner__content"> 
                            <img src="img/logo.png" alt="" class="screen__inner__header__top__logo"/> 
                      <!-- <p class="screen__inner__contentr__title">Субподряд Субпоставки Субуслуги</p> --> 
                    <div class="screen__inner__content"> 
                      <!-- <p class="screen__inner__content__info">Кубань тендер</p> --> 
                    </div> 
                    <!-- <a href="#block_6" class="header-link"> 
                        <div class="header__scrolling-down header__scrolling-down-js"> 
                            <p class="header__scrolling-down-text">ВНИЗ</p> 
                            <div class="scrolling__down-img"> 
                                <img class="scrolling__down-img-arrow" src="img/header/scrolling__down-img-arrow.png" alt=""> 
                            </div> 
                        </div> 
                    </a> --> 
                </div> 
 
            </div> 
        </div> 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<div id="b1">1</div> 
 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<div id="b2">1</div> 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<div id="b3">1</div> 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<div id="b4">1</div> 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<div id="b5">1</div> 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1 
 
<br>1