現在、ヘッダーのコーデイングをしておりまして、行き詰ってしまいました。
内容は,「スクロール量に応じてヘッダーのクラスを付け替えるjavascriptは作れたのですが、スクロールしても付け替えたクラスにcssが適用されない」というものです。
70pxスクロールしたら header要素からheader-commonクラスが外れて代わりにheader-smallerクラスが付きます、
しかし、header-smallerクラスにcssが適用されず、見た目は変わりません。
そしてデベロッパーで確認すると、なぜか#headerにcssが適用されていました。
どうか解決策をいただけるとうれしいです。
該当のソースコード
html
1<header id="header" class="header-common"> 2 <div class="inner"> 3 <h1 id="logo"><a href="">CONECT</a></h1> 4 <!-- globalnav --> 5 <nav id="navigation" class="navigation"> 6 <ul class="globalnav"> 7 <li class="nav-item"><a href="">MENU</a></li> 8 <li class="nav-item"><a href="">MENU</a></li> 9 <li class="nav-item"><a href="">MENU</a></li> 10 <li class="nav-item"><a href="">MENU</a></li> 11 <li class="nav-item"><a href="">MENU</a></li> 12 </ul> 13 </nav><!-- navigation --> 14 </div> <!-- inner --> 15 </header> <!-- /header -->
scss
1//mixinここから 2@mixin header-common { 3 width: 100%; 4 overflow: hidden; 5 position: fixed; 6 position: fixed; 7 top: 0; 8 left: 0; 9 z-index: 100; 10 -moz-transition: height 0.3s; 11 -o-transition: height 0.3s; 12 -webkit-transition: height 0.3s; 13 transition: height 0.3s; 14 15 .inner{ 16 margin: 0 auto; 17 width: 90%; 18 text-align: justify; 19 vertical-align: middle; 20 &:after { 21 content: ""; 22 display: inline-block; 23 width: 100%; 24 height: 0; 25 } 26} 27 28@mixin logo { 29 font-family: "Julius Sans One"; 30 display: inline-block; 31 max-width: 300px; 32 -moz-transition: all 0.3s; 33 -o-transition: all 0.3s; 34 -webkit-transition: all 0.3s; 35 transition: all 0.3s; 36 a { 37 color: #fff; 38 font-weight: lighter; 39 } 40} 41@mixin navigation { 42 display: inline-block; 43 vertical-align: middle; 44 ul { 45 float: right; 46 overflow: hidden; 47 } 48} 49//mixinここまで 50 51 52//header-commonここから 53.header-common { 54 height: 140px; 55 @include header-common; 56 /* サイトロゴ */ 57 #logo { 58 font-size: 44px; 59 padding: 7px 0; 60 line-height: 140px; 61 @include logo 62 } 63 64 #navigation { 65 @include navigation ; 66 } 67 } 68} 69.header-common .globalnav > li { 70 display: inline-block; 71 72 a { 73 display: block; 74 color: #fff; 75 padding: 10px 20px ; 76 font-size: 16px; 77 font-family: "Julius Sans One"; 78 } 79 80} 81//header-common ここまで 82 83//header-smaller ここから 84.header-smaller { 85 height: 70px; 86 @include header-common; 87 /* サイトロゴ */ 88 #logo { 89 font-size: 28px; 90 padding: 5px 0; 91 line-height: 70px; 92 @include logo 93 } 94 95 #navigation { 96 @include navigation ; 97 } 98 } 99} 100.header-smaller .globalnav > li { 101 display: inline-block; 102 103 a { 104 display: block; 105 color: #fff; 106 padding: 10px 10px ; 107 font-size: 14px; 108 font-family: "Julius Sans One"; 109 } 110 111} 112//header-smaller ここまで
js
1function headerSmaller() { 2 3 let header = document.getElementById('header'); 4 // let headerClientRect = header.getBoundingClientRect(); 5 // let y = headerClientRect.top; 6 let y = window.pageYOffset; 7 8 9 10 if (y > 70) { 11 header.classList.remove('header-common') 12 header.classList.add('header-smaller'); 13 } else { 14 header.classList.remove('header-smaller'); 15 header.classList.add('header-common'); 16 } 17 18} 19 20window.addEventListener('scroll', function(e) { 21 headerSmaller(); 22});
長くて見にくいかもですm(__)m
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。