スクロールしたら途中からヘッダーを固定する方法を紹介します。
まず、jQueryを導入してからお使いください。

↓以下が実際のソースサンプルです。

▼html

<nav id="global_nav">
    <div class="wrapper">
        <ul>
            <li class="item"><a href="#menu1">メニュー１</a></li>
            <li class="item"><a href="#menu2">メニュー２</a></li>
            <li class="item"><a href="#menu3">メニュー３</a></li>
            <li class="item"><a href="#menu4">メニュー４</a></li>
            <li class="item"><a href="#menu5">メニュー５</a></li>
        </ul>
    </div>
</nav>

▼css ※一部抜粋しています

#global_nav {
    background: #fff;
    border-bottom: 1px solid #16244e;
    border-top: 1px solid #16244e;
    width: 100%;
}

#global_nav.fixed {
    left: 0;
    position: fixed;
    top: 0;
}

.wrapper {
    margin: 0 auto;
    max-width: 100%;
    padding: 0;
    width: 768px;
}

#global_nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.item {
    border-left: 1px solid #fff;
    width: 20%;
}

.item:last-child {
    border-right: 1px solid #fff;
    margin-right: 0;
}

.item a {
    background: #16244e;
    color: #fff;
    display: block;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
}

▼JavaScript

var nav_pos = $("#global_nav").offset().top;
var nav_height = $("#global_nav").outerHeight();
$(window).scroll(function () {
    if ($(this).scrollTop() > nav_pos) {
        $("body").css("padding-top", nav_height);
        $("#global_nav").addClass("fixed");
    } else {
        $("body").css("padding-top", 0);
        $("#global_nav").removeClass("fixed");
    }
});

今回の記事やデモページ作成にあたり
途中からヘッダー固定にする方法！画面上部までスクロールされたら固定するさんのページを参考にさせていただきました。
ありがとうございます。

デモページは、こちら