jQueryで実装するスクロールで色が変わるヘッダー

2020年3月1日2022年11月14日

この記事では、jQueryを使ってページをある一定の場所までスクロールした時に、色が変わるヘッダーの作り方をご紹介します。

ユウマ

割と多くのサイトで見られるヘッダーデザインです。

それでは早速、見ていきましょう。

※完全無料でプログラミングスクールを利用する
オンライン完結の大手プログラミングスクール「TechAcademy」では、なんと１週間という破格の無料体験期間を設けています。体験期間中、分からない部分はメンターに質問し放題なので、TechAcademyの無料体験を利用してWeb制作・開発の基礎を学ぶのも大いにアリですね。
>> TechAcademyの無料体験はこちら

HTMLとCSSでヘッダーの作成

HTML

<header class="header">
  <h1><img src="logo.png" alt="logo" class="header__logo"></h1>
  <nav class="global-nav">
   <ul class="global-nav__list">
      <li class="global-nav__list--item"><a href='#'>SERVICE<span>事業内容</span></a></li>
      <li class="global-nav__list--item"><a href='#'>COMPANY<span>会社案内</span></a></li>
      <li class="global-nav__list--item"><a href='#'>BLOG<span>ブログ</span></a></li>
      <li class="global-nav__list--item"><a href='#'>MEMBER<span>メンバー</span></a></li>
      <li class="global-nav__list--item contact"><a href='#'>CONTACT<span>お問い合わせ</span></a></li>
    </ul>
  </nav>
</header>

CSS

body {
  background-color: gray;
  height: 2000px;
}
.header {
  transition: .3s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}
.header__logo {
  margin-left: 32px;
  width: 120px;
}
.global-nav {
  height: 100%;
  display: flex;
  align-items: center;
}
.global-nav__list {
  height: 100%;
  display: flex;
  align-items: center;
}
.global-nav__list--item {
  transition: .3s;
  height: 100%;
  cursor: pointer;
  color:  #fff;
  padding: 0 30px;
  display: flex;
  align-items: center;
}
.global-nav__list--item:hover {
  background: #EF7E00;
}
.global-nav__list--item a {
  letter-spacing: 2px;
  font-size: 1.1rem;
  text-align: center;
  display: flex;
  flex-flow: column;
}
.global-nav__list--item span {
  margin-top: .7rem;
  font-size: .7rem;
  color: #fff;
}
.contact {
  background: #EF7E00;
}
.contact:hover {
  opacity: .7;
}

jQueryを使って画面スクロール時にヘッダーの色を変える

$(function() {
  let header     = $('.header');
  let headerLogo = $('.header__logo');
  let navLink    = $('.global-nav__list--item');
  let navSpan    = $('.global-nav__list--item').find('span');
  let navContact = $('.contact');

  $(window).scroll(function () {
    // 画面をトップから100px以上スクロールした時
    if ($(this).scrollTop() >= 100) {
      // ヘッダーのbackground-colorを白に変更し、boxshadowをつける
      header.css({'background':'rgba(250, 250, 250, 1)', 'box-shadow':'0 1px 5px gray'});
      // ロゴ画像を変更
      headerLogo.attr('src', 'logo-black.png').css('width', 75);
      // aタグで囲った文字を黒に変更
      navLink.find('a').css('color', '#333');
      // spanタグで囲った文字を黒に変更
      navSpan.css('color', '#333');
      // CONTACTとお問い合わせの文字色のみ、白のまま固定
      navContact.find('a, span').css('color', '#fff');
      // liタグにホバーした際、文字色を変更
      navLink.hover(
        function() {
          $(this).find('a, span').css('color', '#fff');
        },
        function() {
          $(this).find('a, span').css('color', '#333');
          navContact.find('a, span').css('color', '#fff');
        }
    );
    } else {
      // 画面がトップから100px以下の時は、上記と逆の処理を行う
      header.css({'background':'rgba(250, 250, 250, 0)', 'box-shadow':'none'});
      headerLogo.attr('src', 'logo-white.png').css('width', 120);
      navLink.find('a').css('color', '#fff');
      navSpan.css('color', '#fff');
      navLink.hover(
        function() {
          $(this).find('a, span').css('color', '#fff');
        },
        function() {
          $(this).find('a, span').css('color', '#fff');
        }
      );
    }
  });
});