фиксированное верхнее меню в 2

...
<div id="layout">
    <div class="tmp"></div>
    <div class="fixed">
        <header>
            ....
        </header>
        <nav>
            ....
        </nav>
    </div>
...

.tmp {height: 110px;}
.fixed{
    width: inherit;
    top: 0;
    position: fixed;
    z-index: 10;  // тут указывайте число которое вам необходимо чтобы перекрыть требуемые вам элементы
}

#topmenu ul.stickly{
    z-index: 149;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    background: rgba(14, 15, 15, .5);
    margin: 0px;
}

<script>
    $(document).ready(function(){
        $(window).scroll(function(){ //во время прокрутки страницы
//проверяем прошли ли мы хедер-высоту менюшки
            if ($(window).scrollTop()>$("#header").height()-$("#topmenu").height()){
                $("#tommenu ul").addClass("stickly");//назначаем класс
            }
            else
            {
//если не достигли указанной высоты или когда проскролили вверх страницы удаляем класс
                $("#topmenu ul").removeClass("stickly");
            }
        });
    });
</script>