スクロールするとヘッダーが小さくなる方法

Question

実現したいこと

Wordpressのヘッダーを下へスクロールするとヘッダーのheightが小さくなるアニメーションを付けたい。

前提

スクロールした時に追加してあげる以下のclassを入れたのですが、スクロールしても小さくならなかった。

is-animation

ご確認のほどお願いいたしますm

header.php

<header class="main_header">
     <div class="header_inner">
         <h1 class="logo">
            <?php the_custom_logo(); ?>
         </h1>
      
        <div class="header_right">
           <nav class="header_menu">
              <ul class="menu_ul">
                 <li class="list -about">
                  <a href="" class="link">ABOUT</a>
                  <ul class="dropdown_lists">
                    <li class="dropdown_list"><a href="">- 性能と構造</a></li>
                    <li class="dropdown_list"><a href="">- 保証・アフターサービス</a></li>
                    <li class="dropdown_list"><a href="">- 家づくりの流れ</a></li>
                  </ul>
                </li>
                 <li class="list -event"><a href="" class="link">EVENT</a></li>
                 <li class="list -works"><a href="" class="link">WORKS</a></li>
                 <li class="list -lineup">
                  <a href="" class="link">LINE UP</a>
                  <ul class="dropdown_lists">
                    <li class="dropdown_list"><a href="">- 自由設計</a></li>
                    <li class="dropdown_list"><a href="">- コンセプト住宅</a></li>
                  </ul>
                </li>
                 <li class="list -contact"><a href="" class="link">CONTACT</a></li> 
              </ul>
           </nav>
     

            <a class="menu">
               <span class="menu__line menu__line--top"></span>
               <span class="menu__line menu__line--middle"></span>
               <span class="menu__line menu__line--bottom"></span>
            </a>
         </div>
     </div>    

JS

$(function() {
	$(window).on('load scroll', function() {
		var scrollPos = $(this).scrollTop();
		if ( scrollPos > 100 ) {
			$('header').addClass('is-animation');
		} else {
			$('header').removeClass('is-animation');
		}
	});
});	

CSS

.main_header {
  width: 100%;
  display: flex;
  height: 170px!important;
  position:fixed;
  top: 0;
  background-color: #f2f4ef;
  transition: .3s;
  z-index: 100;
}

/*スクロールした時に追加してあげるclass*/
.is-animation{
  height: 100px;
}	

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

.main_header に height: 170px!important; と!importantが付いているので詳細度で負けているので効かない状態です。.is-animation にも !important を付ければ詳細度が同じになり後の方が優先されるので効くようになります。

念のためにより詳細度かより高くなるようにセレクタを設定するのが確実でしょう。

/*スクロールした時に追加してあげるclass*/
.main_header.is-animation{
  height: 100px!important;
}

Comments

[yosuke1025]

ご教示いただきありがとうございますm
しかし、.is-animation にも! importantを追記してスクロールしましたけど縮小されなかったので効かなかったです、、
.main_header {
width: 100%;
display: flex;
height: 170px!important;
position:fixed;
top: 0;
background-color: #f2f4ef;
transition: .3s;
z-index: 100;
}

/*スクロールした時に追加してあげるclass*/
.main_header .is-animation{
height: 100px!important;
}

[hatena19]

.main_header .is-animation{

上記の .is-animation の前のスペースを削除してください。
スペースがあるのとないのとでは、意味が違います。

[yosuke1025]

ご教示ありがとうございます。
申し訳ございませんが、スペースを削除して確認しましたが、スクロールしても縮小されませんでした、、
/*スクロールした時に追加してあげるclass*/
.main_header.is-animation {
height: 100px!important;
}

[hatena19]

質問のHTML、CSSでサンプルを作成してみましたが、スクロールで縮小しました。
下記サンプルで確認してみてください。

https://codepen.io/hatena19/pen/JjVyzKg

提示されていない部分に原因があると思います。

[yosuke1025]

確認しましたが、確かに縮小されていますね。
掲示されていない部分に原因があると思いますので、さらにCSSを掲示いたしますのでご確認お願いいたしますm
.main_header .header_inner {
width: 100%;
display: flex;
align-items: center;
}

.main_header .logo {
margin-left: 34px;
}

.custom-logo-link img {
display: block;
width: 300px;
}

.main_header .header_inner .header_right {
display: flex;
width: 100%;
height: 100%;
justify-content: flex-end;
align-items: center;
gap: 50px;
margin-right: 50px;
}

.main_header .header_menu {
height: 100%;
}

.main_header .header_menu .menu_ul {
display: flex;
gap: 37px;
margin-bottom: 0;
height: 100%;
}

.main_header .menu_ul .link {
width: 100%;
color: #433f37;
font-size: 14px;
font-family: "Cormorant",serif;
font-weight: bold;
letter-spacing: 1px;
position: relative;
transition: 0.3s;
display:flex;
align-items:center;
height: 100%;
}

.main_header .menu_ul .link::before{
content: "";
position: absolute;
left: 50%;
width: 0;
height: 2px;
bottom: 2px;
background: #BDAB69;
transition: 0.3s;
}

.main_header .menu_ul .link:hover::before {
left: 0;
width: 100%;
}

/*ドロップダウンメニュー*/
.menu_ul .list {
position: relative;/* .dropdown_listsの位置の基準を.listにする */

}

.dropdown_lists {
position: absolute;
width: 220px;
left: 0;/* position:relative;で.linkを基準にしたので0でOK */
background-color: #433f37;
padding: 10px 0;
transform: scaleY(0); /* ドロップダウンメニューの非表示 */
transform-origin: center top; /* 変形を適応する基準を設定 */
transition: transform .3s ease-out, opacity .3s ease-out; /* 表示の変化をアニメーション化 */
opacity: 0;
}

.list:hover .dropdown_lists{
opacity: 1;
transform: scaleY(1); /* ドロップダウンメニューの表示 */
}

.dropdown_list{
padding-top: 5px;
}

.dropdown_list a {
justify-content: center;
align-items: center;
color: #fff;
letter-spacing: 1px;
font-weight: normal;
font-size: 13px;
line-height: 1;
padding: 10px 10px 10px 20px;
display: block;/* paddingが効いていないのでブロックレベル要素にする */
}

.dropdown_list a:hover{
color: #C0C0C0;
}

[yosuke1025]

CSSの追記になります。
ハンバーガーメニューを表示させる部分になります。
/*menu*/
.menu{
padding: 1px 2;
position: relative;
width: 30px;
display: flex;
gap: .6em;/*.menu__line間の余白 */
flex-direction: column;/*線を縦並びに */
z-index: 99;
}
.menu__line{
background: #000;
display: block;
height: 2px;
/* position: absolute; */
transition:transform .3s;
width: 100%;
}
.menu__line--top {
/* margin: 6px 0; */
}
.menu__line--middle {
/* margin: 15px 0; */
}
.menu__line--bottom{
/* margin: 24px 0; */
}
.menu__line--top.active{
position: absolute;
top: 8px;
transform: rotate(405deg);
background: #f4f6f7;
}

.menu__line--middle.active {
opacity: 0;
}

.menu__line--bottom.active{
position: absolute;
bottom: -6px;
transform: rotate(135deg);
background: #f4f6f7;
}

[yosuke1025]

そしてハンバーガーメニューのJSも念の為に追記いたします。
JSにヘッダーを縮小させるために追記すると何故かハンバーガーの三本線が開けなくなっている模様になっています、、
お手数ですが、ご確認いただけたら幸いですm
(htmlのgnavタグは連携していません)
/*ハンバーガーメニュー*/
jQuery(function($){
$('.menu').on('click',function(){
$('.menu__line').toggleClass('active');
$('.gnav').fadeToggle();
});
});

[yosuke1025]

回答ありがとうございます。
試したところ問題が解決しました！
ベストアンサーに選ばせていただきました。

Answer 2

デベロッパーツールにて確認しましたらクラス付与がきちんと機能していなかったようでした。WordPressの標準jQueryが読み込まれているため、＄を回避して以下のように修正しましたら効きました。ご教示ありがとうございました。

jQuery(function($){
$(window).on('load scroll', function() {
var scrollPos = $(this).scrollTop();
if ( scrollPos > 100 ) {
$('header').addClass('is-animation');
} else {
$('header').removeClass('is-animation');
}
});
});