На самом деле не так страшен черт как его малюют. 
Приступим: 
Для начала обернем блок ( я от балды просто обернул код вывода меню навигации) , который надо зафиксировать при прокрутке в

<div id="scroll-menu" class="default">

...

</div>

Далее пишем простой ""жабаскрипт" смены класса данного блока при определенном расстоянии

<script>

 $(document).ready(function(){

        var $menu = $("#scroll-menu");

        $(window).scroll(function(){

            if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){

                $menu.removeClass("default").addClass("fixed");

            } else if($(this).scrollTop() <= 100 && $menu.hasClass("fixed")) {

                $menu.removeClass("fixed").addClass("default");

            }

        });//scroll

    });

</script>

 

*тут 100 - это расстояние прокрутки вверх или вниз на 100px (шапки бывают разной высоты, поэтому полной универсальности не ждите... пропишите сколько нужно)

вставляем этот скрипт в шапку перед 

</head>

Ну и стиль для фиксированного блока: 

#scroll-menu.fixed{

position: fixed;

top: 0;

z-index:99;

margin:auto;

width: 100%

}

все, господа.... просто? 

из новинок: 
 

приблуда фиксации блока при скролле средствами css
 

position: sticky;

(дочерний блок фиксируется в пределах родительского блока )

пример 1

прикрепить элемент к верхнему краю

 

./КЛАСС ФИКСИРУЕМОГО БЛОКА/) {
 position: sticky;
 position: -webkit-sticky;/* Safari */
 top: 0;
}

пример 2

прикрепить элемент к нижнему краю
 

./КЛАСС ФИКСИРУЕМОГО БЛОКА/) {
 position: sticky;
 position: -webkit-sticky;/* Safari */
 bottom: 0;
}