スティッキーヘッダーが適用されない

下記コードでスティッキーヘッダーが適用されません。
下にスライドすると、ヘッダーがついてくるようにしたいのですが・・・

同時にハンバーガーメニューも適用されません。
JSのURLがおかしいのでしょうか。。。

HTML
1  <!-- header -->
2  <header class="header" id="header">
3    <div class="header-inner"> 
4      <nav class="header-nav">
5        <ul class="nav-list">
6          <li class="nav-item"><a href="#fv">top</a></li>
7          <li class="nav-item"><a href="#design">design</a></li>
8          <li class="nav-item"><a href="#about">about</a></li>
9          <li class="nav-item"><a href="#skills">skills</a></li>
10        </ul>
11      </nav>
12      <button class="burger-btn">
13        <span class="bar bar_top"></span>
14        <span class="bar bar_mid"></span>
15        <span class="bar bar_bottom"></span>
16      </button>
17    </div>
18    </header>
19  <!-- //header -->
20
21・
22・
23・
24
25  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
26  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
27  <script src="./js/design.js"></script>

CSS
1.header{
2  padding: 30px 0px;
3  position: absolute;
4  top: 0;
5  left: 0;
6  z-index: 1;
7  box-sizing: border-box;
8  width: 100%;
9  transition: .3s;
10  background-color: #A5BDC6;
11}
12.header-inner{
13  display: flex;
14  justify-content: space-between;
15  align-items: center;
16  max-width: 1100px;
17  margin: 0 auto;
18  justify-content: flex-end;
19}
20.header a{
21  color: #fff;
22  text-decoration: none;
23  transition: .3s;
24  font-weight: lighter;
25  position: relative;
26}
27.header a:hover{
28  opacity: .7;
29  transition: .3s;
30}
31.header a::after{
32  position: absolute;
33  bottom: -6px;
34  left: 0;
35  content: '';
36  width: 100%;
37  height: 1px;
38  background: white;
39  transform: scale(0, 1);
40  transform-origin: center top;
41  transition: transform .3s;
42}
43.header a:hover::after {
44  transform: scale(1, 1);
45}
46.nav-list{
47  display: flex;
48}
49.nav-item{
50  margin-right: 60px;
51  font-size: 18px;
52}
53.nav-item:last-of-type{
54  margin-right: 0;
55}
56.burger-btn{
57  display: none;
58}
59.header.fixed{
60  position: fixed;
61  background-color: #A5BDC6;
62  padding: 30px;
63  width: 100%;
64  transition: .3s;
65}

JS
1//スティッキーヘッダー
2$(function(){
3  var $win = $(window),
4      $fv = $('.fv'),
5      $header = $('.header'),
6      fvHeight = $fv.outerHeight();
7      fixedClass = 'fixed';
8
9    $win.on('load scroll',function(){
10      var value = $(this).scrollTop();
11      if($win.width() > 768){
12        if( value > fvHeight){
13          $header.addClass(fixedClass);
14        }else{
15          $header.removeClass(fixedClass);
16        }
17      }
18    });
19});
20
21
22//ハンバーガーメニュー
23$('.burger-btn').on('click',function(){
24  $('.header-nav').fadeToggle(300);
25  $(this).toggleClass('cross');
26  $('body').toggleClass('noscroll');
27});

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

回答2件

js
1      $fv = $('.fv'),
2

このクラスがHTML上にないので動かないのだと思います。
試しに、headerなどをあてると追従しました。

投稿2020/08/28 05:32

beginner_t

総合スコア716

自己解決

beginner_tさんからのヒントを受け解決しました！

JS
1$(function(){
2  var $win = $(window),
3      $header = $('.header'),
4      fvHeight = $header.outerHeight();
5      fixedClass = 'fixed';
6
7    $win.on('load scroll',function(){
8      var value = $(this).scrollTop();
9      if($win.width() > 768){
10        if( value > fvHeight){
11          $header.addClass(fixedClass);
12        }else{
13          $header.removeClass(fixedClass);
14        }
15      }
16    });
17});