【JavaScript】スクロール中にヘッダーを固定する方法【簡単・コピペOK】

こんにちは。ホームページを閲覧している中で、始めはヘッダーが固定されていなかったのに、途中から常に規定の位置で固定されているページをお見掛けしたことはありませんか？

今回はスクロール中にヘッダーナビゲーションを固定させる方法をご紹介していきたいと思います。

また、本記事のコードではJQueryを使用しています。

HTML
CSS
JavaScript
デモページ
ひとこと

HTML

HTMLでは、トップ画像とナビゲーション、サイトの長さを出すためにsection・footer要素を置いています。

<div id="top_visual"></div>
<nav>
    <div class="wrapper">
        <ul>
            <li class="item"><a href="#news">News</a></li>
            <li class="item"><a href="#about">About</a></li>
            <li class="item"><a href="#blog">Blog</a></li>
            <li class="item"><a href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>
<section id="news">
    <div class="wrapper">
        <h1>News</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="about">
    <div class="wrapper">
        <h1>About</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="blog">
    <div class="wrapper">
        <h1>Blog</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<section id="contact">
    <div class="wrapper">
        <h1>Contact</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
</section>
<footer>
    <p>© 2020 nyanblog</p>
</footer>

CSS

CSSで見た目を整えていきます。
また、JavaScriptでつけ外しをする「nav.fixed」でヘッダーを固定しています。

@charset "utf-8";

*{
    margin: 0;
}

#top_visual {
    background: url(../img/visual.jpg) center center / cover no-repeat;
    height: 480px;
}

nav {
    background: #fff;
    width: 100%;
}

nav.fix {
    position: fixed;
    right: 0;
    top: 0;
}

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

nav ul {
    justify-content: flex-end;
    display: flex;
    list-style: none;

}

.item {
    margin: 0 2em;
    padding: 17px 0;
}

.item a {
    color: #B78D4A;
    text-decoration: none;
}

.item a:hover{
    color: #D5BC94;
}

h1 {
    font-size: 1.25rem;
    padding: 2rem 0;
    color: #B78D4A;
    font-weight: normal;
}

p {
    line-height: 2;
    padding-bottom: 4rem;
    color: #555A60;
}

section{
    background-color: #F0F0F0;
    padding: 2em;

}

section .wrapper{
    max-width: 800px;
}

footer {
    background-color: #B78D4A;
    padding: 2em;
}

footer p {
    font-size: .8em;
    color: #fff;
    max-width: 800px;
    padding: 0;
}

JavaScript

JavaScriptでスクロールイベントするたびに、スクロールの位置とnav要素の位置と比較しています。
スクロールの位置を超えると、nav要素に「fix」クラスを付与し、上部に固定させます。

$(function() {
    var pos = $("nav").offset().top;
    var height = $("nav").outerHeight();
    $(window).scroll(function () {
        if ($(this).scrollTop() > pos) {
            $("nav").addClass("fix");
            $("body").css("padding-top", height);
        } else {
            $("nav").removeClass("fix");
            $("body").css("padding-top", 0);
        }
    });
});