Navigation and Sticky Nav

Question

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 buggy...

First problem is: When trying to make Sticky Nav, the Nav gets bugged...

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

HTML from the navbar:

<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 of the 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;'
    });

Answer 1

I created one using Bootstrap this way,

jQuery(document).ready(function(){     
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function(){   
    var scrollPos = jQuery(window).scrollTop();         
     if(scrollPos >= navOffset){        
        jQuery("nav").addClass("navbar-fixed-top minhaClasse"); 
     }else{             
         jQuery("nav").removeClass("navbar-fixed-top minhaClasse");   
   }
  });
}); 

If you use the default structure of boostrap it comes with the navbar-Fixed-top classes only thing you need to do the scroll calculation of when the menu arrives at the edge of the browser receive this class.

https://www.oxyhospedagem.com.br of the one conferred as was