Navigation and nav sticky

I'm trying to make my navbar sticky when it comes to the section after the header, but I'm not getting it, I've researched several ways, but the navbar gets very bugged ...

First problem: When trying to make sticky nav, the nav gets bugged ...

Second problem: I was also trying to add shadow to the navbar but no shadow appears. And when I reduce the size of the screen the slider gets on top of the navbar, even the navbar having 5000 index.

Navbar HTML:

<div class="row">
        <nav id="navbar">
            <img class="logo" src="img/logo.png" alt="logo">


          <ul class="menu menu-js">

            <li><a href="#search"><i class="ion-ios-search-strong icon-small clearfix"></i>SEARCH</a></li>

            <li><a href="#top_artists"><i class="ion-ios-people icon-small clearfix"></i>TOP ARTISTS</a></li>

            <li><a href="#about_us"><i class="ion-ios-person icon-small clearfix"></i>ABOUT US</a></li>

            <li><a href="#contacts"><i class="ion-ios-telephone icon-small clearfix"></i>CONTACTS</a></li>

            <li><a href=""><i class="ion-ios-unlocked icon-small clearfix"></i>SETTINGS</a><ul class="sub-menu">

                <li><a href="#">LOGIN</a></li>
                <li><a href="#openModal">REGISTER</a></li>
                </ul>
                </li>
          </ul>






            <!------- Mobile navi button ----->
            <a class="mobile-nav-icon js--nav-icon"><i class="ion-navicon-round"></i></a>
        </nav>
        </div>

CSS from nav:

/ FIRST NAVI /

.sticky .menu,
.menu > li {
    margin: 0;
    padding: 0;
    z-index: 5000;
}

.sticky .menu {
    background-color: #fff;
    width: 100%;
    /* impede que os menus quebrem */
    text-align: center;
    z-index: 5000;
}

.sticky .logo {
    position: absolute;
    top: 1.1%;
    transform: translateY(-5%);
    float:  left;
    width: 210px;
    height: auto;
    overflow: hidden;
    margin-left: 5%;
    z-index: 5000;
}

.sticky .menu {
    text-align: right;
    padding: 0;
    z-index: 5000;
}

.sticky .menu > li {
    background-color: #fff;
    position: relative;
    list-style-type: none;
    display: inline-block;
    width: 14%;
    text-align: center;
    z-index: 5000;
}

.sticky .menu > li:last-child {
    margin-right: 5%;
    z-index: 5000;
}

.sticky .menu>li>a {
    font-size: 85%;
    font-weight: bold;
    padding: 20px 0;
    color: #74C8D2;
    text-decoration: none;
    display: block;
    z-index: 5000;
}

//*.menu>li>a:hover {
//    color: #fff;
//    background-color: #74C8D2;
//    transition: all .5s ease-in-out;
/*/



/* shadow */
/*.menu>li>a::after,
.menu>li>a::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    content: "";
    opacity: 0;
}

.menu>li>a::after {
    top: 100%;
    background: -webkit-radial-gradient(50% -50%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% -50%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>li>a::before {
    top: -5px;
    background: -webkit-radial-gradient(50% 150%, ellipse, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at 50% 150%, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 80%);
}

.menu>li>a:hover::after,
.menu>ul>li>a:hover::before {
    opacity: 1;
} */




/* menu icon */
.sticky .menu>li>a>i {
    vertical-align: middle;
}



/* submenu */
.sticky .sub-menu {
    display: none;
    width: 100%;
    padding: 5px 0px;
    position: absolute;
    top: 100%;
    left: 0px;
    background: #fff;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    /* transition: all .5s ease-in-out;*/
}

/* .menu li:hover .sub-menu {
    z-index: 1;
    opacity: 1;
} */


.sticky .sub-menu li {
    display: block;
    font-size: 75%;
    text-align: center;
}

.sticky .sub-menu li a {
    padding: 10px 30px;
    display: block;
    text-decoration: none;
    color: #74C8D2;
}

/*.sub-menu li a:hover,
.sub-menu .current-item a {
    background: #74C8D2;
    color: #fff;
    transition: .5s ease-in-out;
} */

The JS I'm using to make sticky:

/*Sticky nav*/
    $('.js--section-search').waypoint(function(direction) {
       if (direction == "down") {
            $('navbar').addClass('sticky');   
       } else {
            $('navbar').removeClass('sticky');
       }                               
    }, {
        offset: '60px;'
    });