スクロールしたらナビゲーションを固定・変化させる

html と CSSファイルを準備

index.html

<header class="l-header js-header">
    <div class="l-header-inner js-header-inner">
      <div class="l-header-horizontal l-inner">
        <a href="#" class="l-header-logo">
          <img src="./img/logo/logo.svg" alt="">
        </a>
        <ul class="l-header-nav">
          <li class="js-smooth-scroll">
            <a href="#1" class="l-header-link" data-target="problems">メニュー1</a>
          </li>
          <li class="js-smooth-scroll">
            <a href="#2" class="l-header-link" data-target="image">メニュー2</a>
          </li>
          <li class="js-smooth-scroll">
            <a href="#3" class="l-header-link" data-target="humanresources">メニュー3</a>
          </li>
          <li class="js-smooth-scroll">
            <a href="#4" class="l-header-link" data-target="specialty">メニュー4</a>
          </li>
          <li>
            <a href="#" class="l-header-link c-button-sm">お問い合わせ</a>
          </li>
        </ul>
      </div>
    </div>
  </header>

CSSファイルでは画面上に固定された状態のCSSを書いておく。

app.scss

.l-header {
  &.is-fixed {
    position: fixed; //画面のいちばん上に固定
    top: 0;
    left: 0;
    background-color: #fff; //色は白にしまーす
    z-index: 2;
    width: 100%;
  }

}

windowオブジェクト （JavaScriptでもっとも重要なオブジェクト）

windowオブジェクトはブラウザのウィンドウのことを指す。
windowオブジェクトはjavaScriptにあらかじめ用意されているオブジェクトで、何もJavaScriptに書かれていない状態でもwindowオブジェクトを使うことができる。

JavaScriptの記述

app.js

$(function() {

  var $win = $(window),
      $header = $('.js-header'),
      height = $header.outerHeight(),
      $main = $('.l-main'),
      headerTop = $header.offset().top,
      fixedClass = 'is-fixed';

  function handleScroll() {
    var value = $(window).scrollTop();
    if ( value > headerTop ) {
      $header.addClass(fixedClass);
      $main.css('margin-top', height)
    } else {
      $header.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  }

  handleScroll();
  $win.on('scroll', handleScroll);
});

まずやりたいことを日本語で書き出してみる

(1) offset();を使って要素の表示位置を取得する
(2) scrollTop()を使ってスクロール量を取得
**(3) スクロール量が要素以上となったらcssを指定

Firefoxでloadが使えない問題

app.js

$(function() {
  var $win = $(window),
      $header = $('.js-header'),
      height = $header.outerHeight(),
      $main = $('.l-main'),
      headerTop = $header.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > headerTop ) {
      $header.addClass(fixedClass);
      $main.css('margin-top', height)
    } else {
      $header.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

これだとfirefoxではloadが正常に発火されません。