jQuery　ナビゲーションを固定し、指定した位置で非表示にする方法

jQueryでナビゲーションを作成しています。
上部にあるナビゲーションを固定表示、フッター前で非表示したいです。
どちらもできたのですが、最初に読み込んだときに、スクロールしていくと意図せぬ位置でナビゲーションが非表示になってしまします。
更新をするとナビゲーションが出現し、問題なくフッターで非表示になります。
何を追加すれば改善されるでしょうか。

よろしくお願いいたします。

現在のコードは下記です。

  var $win = $(window),
      $main = $('#slick-box'),
      $header = $('header'),
      headerHeight = $header.outerHeight(),
      footerHeight = $('footer').outerHeight(),
      docmentHeight = $(document).height(),
      headerPos = $header.offset().top,
      fixedClass = 'is-fixed',
      hideClass = 'is-hide';

      $win.on('load scroll', function() {
        var value = $(this).scrollTop(),
            scrollPos = $win.height() + value;

  if(window.matchMedia('(min-width:600px)').matches){
    if ( value > headerPos ) {
      if ( docmentHeight - scrollPos <= footerHeight ) {
        $header.addClass(hideClass);
      } else {
        $header.removeClass(hideClass);
      }
      $header.addClass(fixedClass);
      $main.css('margin-top', headerHeight);
    } else {
      $header.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  }
});
});

HTMLは以下です。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1.0">
    <meta name="Author" content="*******"/>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <title>****************</title>
<style>
header, header div#head {
		margin: 0;
		padding: 0;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		background: #fff;
}

header div#head {
		display: flex;
		justify-content: flex-start;
		align-items: baseline;
}

header div#head h1.logo {
		margin: 0;
		padding: 10px;
}

header div#head p.top_title {
		margin: 0;
		padding: 0 20px;
		font-weight: bold;
		color: #3271a2;
}

@media screen and (max-width: 599px) {
		h1.logo {
				margin: 0;
				padding: 0;
				width: 40%;
		}
		h1.logo img {
				width: 100%;
		}
		p.top_title {
				margin: 0;
				padding: 0;
		}
}

@media screen and (min-width: 600px) and (max-width: 959px) {
		h1.logo {
				margin: 0;
				padding: 0;
				width: 40%;
		}
		h1.logo img {
				width: 100%;
		}
		p.top_title {
				margin: 0;
				padding: 0;
		}
}
header, header div#head {
		transition: .3s;
}

.is-fixed {
		position: fixed;
		top: 0;
		left: 0;       
		z-index: 2;
}

.is-hide {
		transform: translateY(-100%);
}
</style>
</head>
<body>
  <header>
      <div id="head">
        <h1 class="logo"><img src="" alt=""></h1>
        <p class="top_title"></p>
      </div>
      <div id="navToggle">
        <div>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>

    <nav id="main_nav">
        <div class="header_nav_list">
          <span><a href=""></a></span>
        </div>

        <div class="main_nav_list">
          <span><a href="#cont_area01"></a></span>
          <span><a href="#cont_area02"></a></span>
          <span><a href="#cont_area03"></a></span>
          <span><a href="#cont_area04"></a></span>
          <span><a href="#cont_area05"></a></span>
        </div>
    </nav>
  </header>

よろしくお願いいたします。

（追記）
各ブラウザで非表示となる位置が異なりました。
GoogleChrome：#cont_area04にきたとき（F5で更新すると出てくる）
Firefox：#cont_area03にきたとき（F5で更新しても出てこない）
Opera：#cont_area03にきたとき（F5で更新すると出てくる）
IE：問題なく動作

x_x

2019/04/12 03:26

「どちらもできた」と言っているのは何ができているのでしょうか？

kotorarui

2019/04/12 03:33

動作はした、ということです。言葉足らずで申し訳ございません。

x_x

2019/04/12 03:49

そもそもまともに動かないように見えるので、とりあえず表示されるもの（文字など）を入れてみてはどうでしょうか？

kotorarui

2019/04/12 04:01 編集

本来のHTMLには文字の部分は入力されています。こちらに書く際に消しました。全文記載したほうが分かりやすかったでしょうか、、申し訳ありません。プログラム自体は問題ないでしょうか？

x_x

2019/04/12 04:02

まともに動かないのなら問題はあるのでは？ scrollPos が何を意味しているのか教えてください

kotorarui

2019/04/12 04:18

申し訳ございません。私自身初心者でして、以下を参考に作成しました。 https://www.nxworld.net/tips/stikcy-or-change-header-and-navigation-when-scrolling-using-jquery.html

行動規範の内容に同意します

回答1件

ベストアンサー

表示下部を取るため、window.innerHeight を取得したいのだと思います。
IE11 でそのまま取得できるかと思いますが、jQuery のバージョンが低いので念のためウィンドウサイズの取得も参考にしてください。

JavaScript
1var windowHeight = window.innerHeight;
2var scrollPos = windowHeight + value;

フッター手前のロジックもよくわからないので変更します。

jQuery
1            var footerPos = $('footer').position().top;
2            //if ( docmentHeight - scrollPos <= footerHeight ) {
3            if (scrollPos > footerPos) {

投稿2019/04/12 04:41

x_x

総合スコア13749

kotorarui

2019/04/12 04:54

回答ありがとうございます。記載していただいたコードをどこに挿入すればよいのでしょうか？

x_x

2019/04/12 04:57

var value = $(this).scrollTop(), scrollPos = $win.height() + value; の代わりに上のスクリプト、 if ( docmentHeight - scrollPos <= footerHeight ) { の代わりに下のスクリプトということになります。

x_x

2019/04/12 04:58

ああ、これは残してください var value = $(this).scrollTop();

kotorarui

2019/04/12 05:04

ありがとうございます。変更してみたのですが、固定表示されなくなってしまいました。 $(function() { var $win = $(window), $main = $('#slick-box'), $header = $('header'), headerHeight = $header.outerHeight(), footerHeight = $('footer').outerHeight(), docmentHeight = $(document).height(), headerPos = $header.offset().top, fixedClass = 'is-fixed', hideClass = 'is-hide'; $win.on('load scroll', function() { var value = $(this).scrollTop(), var windowHeight = window.innerHeight; var scrollPos = windowHeight + value; if(window.matchMedia('(min-width:600px)').matches){ if ( value > headerPos ) { var footerPos = $('footer').position().top; //if ( docmentHeight - scrollPos <= footerHeight ) { if (scrollPos > footerPos) { $header.addClass(hideClass); } else { $header.removeClass(hideClass); } $header.addClass(fixedClass); $main.css('margin-top', headerHeight); } else { $header.removeClass(fixedClass); $main.css('margin-top', '0'); } } }); });

x_x

2019/04/12 05:18

jsfiddle で書いてみましたが、動かないでしょうか？ https://jsfiddle.net/z2n4jrwa/

kotorarui

2019/04/12 05:24

できました！ありがとうございました。

行動規範の内容に同意します