How To Add Sticky Navigation in Magento 2 Theme

Sticky navigation with animation in down effect.

 

Step 1 : Open your "header.phtml" file.

Step 2 : Copy below javascript code and past header.phtml file in bottom.

 <script type="text/javascript">  
      require([  
      'jquery'  
      ], function ($) {  
           $(window).scroll(function(){  
                if ($(window).scrollTop() >= 150) {  
                  $('.page-wrapper').addClass('fixed-header');  
                }  
                else {  
                  $('.page-wrapper').removeClass('fixed-header');  
                }  
           });  
      });  
 </script>  

Step 3 : Copy below CSS and paste in css file.

 .fixed-header.page-wrapper .nav-sections{position:fixed;z-index:9;top:0;width:100%;margin-top:0;animation:nav-down .7s;}  
 @keyframes nav-down {  
 0%{transform:translateY(-100%)}  
 100%{transform:translateY(0)}  
 }  

Step 4 : Please clean cache : php bin/magento cache:clean

Now refresh your browser and scroll down.

Info: This example use only in magento project if you want other project use please change class name.