jQueryでborderの色を変更したい

Question

headerの高さを超えた時にborderの色を変更したいです。
addClassとremoveClassで.colorの付け外しをしたいのですが、反映されません。
どこが間違っているかご指摘お願いいたします。

<header class="site-header">
  <ul class="header-list">
    <li><a href="#item-section" style="text-decoration:none;" class="header-link">ITEMS</a></li>
    <li><a href="#sns-section" style="text-decoration:none;" class="header-link">SNS</a></li>
    <li><a href="#shop-section" style="text-decoration:none;" class="header-link">SHOP</a></li>
    <li><a href="#map-section" style="text-decoration:none;" class="header-link">MAP</a></li>
    <li><a href="#" style="text-decoration: none;" class="header-link lang">Italy</a></li>
  </ul>
</header>
<section class="top">
  <div class="top-img">
    <img src="img/dounuts_logo3.png" alt="ロゴ">
  </div>
</section>

<section class="message semicircle">
  <div class="message-z">
  <h1>from Dounut's Pop</h1>
  <div class="message-center">
    <div class="message-p">
      <p class="messa">テキスト</p>
      <p class="messa">テキスト</p>
      <p class="messa">テキスト</p>
      <p class="messa messa-main">メインテキスト！</p>
    </div><!--message-p-->
  </div><!--message-center-->
</div>
</section>

/*ヘッダー*/
header {
  position: relative;
  height: 56px;
  position: fixed;
  top: 0;
  right: 0;
  transition: 0.5s;
  z-index: 100;
}
.site-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  line-height: 56px;
}
.site-header a {
  color: #fff;
  font-size: 20px;
  transition: 0.5s;
  font-weight: bold;
  font-family: 'Hiragino Kaku Gothic Std','arial black';
}
.site-header.change-color a {
  color: #574643;
  font-size: 20px;
  transition: 0.5s;
  background-color: rgba(255, 255, 255, 0);
}
.header-list {
  display: flex;
  list-style: none;
}
.header-list li a {
  font-size: 20px;
}
.header-link {
  margin-right: 32px;
}
.header-link.change-color{
  margin-right: 32px;
}
.lang {
  border: solid 2px #fff;
  padding: 4px;
  margin-right: 32px;
  font-size: 25px;
}
.lang.color {
  border: solid 2px #574643!important;
  padding: 4px;
  margin-right: 32px;
  font-size: 30px;
}
/*ヘッダーの変更後の背景*/
.change-color {
  background-color: rgba(255, 255, 255, 0.753);
  transition: 0.5s;
}
/*トップ*/
.top {
  background-image: url(img/sample/4507419_s.png);
  background-size: cover;
  height: 100%;
  width: 100%;
}
.top-img {
  text-align: center;
  width: 100%;
}
.top-img img {
  background-color: rgba(255, 255, 255, 0.733);
  width: 30%;
  padding: 48px;
  border-radius: 56px;
  margin: 160px 0;
}
/*メッセージ*/
.message-z {
  z-index: 1;
}
.message-p p  {
  color: #574643;
}
.message-center {
  margin: 0 auto;
  padding: 16px 16px;
  position: relative;
  z-index: 10;  /* 追加 */
  background: none;
  text-transform: uppercase;
  z-index: 10;
}
.message-center::after {
  position: absolute;
  top: 16px;
  left: -16px;
  content: "";
  height: 100%;
  width: 100%;
  z-index: -999;
  background-color: #f8e6e6;
  padding: 24px 32px;
}
.message-center::before {
  position: absolute;
  border: 1px solid #ff7177;
  content: "";
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: -998;  /* afterの数値より上にする */
  padding: 24px 32px;
}
.message-center {
  width: 40%;
}
.message-center img {
  width: 30%;
}
.message-img {
  text-align: right;
  margin-top: -80px;
}
.message-p{
  font-size: 15px;
  padding: 24px 32px;
  line-height: 1.5;
}
.messa {
  margin-bottom: 24px;
}
.messa-main {
  font-size: 28px;
}

/*スクロールでヘッダーの背景色変更*/
jQuery(window).on('scroll', function () {
 
  if ($('header').height() < $(this).scrollTop()) { 
 $('header').addClass('change-color');
 $('lang').addClass('color');
}else {
  $('header').removeClass('change-color'); 
  $('lang').removeClass('color'); 
} });

Comments

[m.ts10806]

このHTMLだけだとそもそもスクロール発生させられませんが、
もう少しHTML出せませんか？
あとcolorというクラスは.langが当てられた同じ要素に使われたときにしか有効になりませんが、そこは認識されてますか？

[azaz_wb]

コードを書き足しました。
headerに.change-colorを付け足したのと同じように、.langに.colorを付けたいのですが、これだと有効にならないということでしょうか。

Answer 1

ソースを見てみるました。

まずは確認ですが、

 $('header-list span').addClass('color');

で、colorのクラスを付けていますね。cssを見てみると、

.lang {
  border: solid 2px #fff;
  padding: 4px;
  margin-right: 32px;
  font-size: 25px;
}
.lang.color {
  border: solid 2px #574643!important;
  padding: 4px;
  margin-right: 32px;
  font-size: 30px;
}

で、borderを変更しようとしていることが分かります。しかし、jQueryでの$('header-list span')のセレクタで狙った要素に辿りつけていないように見えます。

よくみてみると、$(`header-list`)だと

<header-list> </header-list>

という要素を探索しようとします。これは狙ったものと違うものでしょう。質問者のhtmlソース拝見すると、

  <ul class="header-list">
    <!-- この子孫要素を検索したい -->
  </ul>

ということだと思います。ですので、'''.header-list```というセレクタに変更すると良いように思います。

$('.header-list span')

ただし、ul要素の子孫を見てみると

 <li><a href="#item-section" style="text-decoration:none;" class="header-link">ITEMS</a></li>
    <li><a href="#sns-section" style="text-decoration:none;" class="header-link">SNS</a></li>
    <li><a href="#shop-section" style="text-decoration:none;" class="header-link">SHOP</a></li>
    <li><a href="#map-section" style="text-decoration:none;" class="header-link">MAP</a></li>
    <li><a href="#" style="text-decoration: none;" class="header-link lang">Italy</a></li>

内に<span>というタグが無いため、これだと辿りつけません。

おそらく、

<li><a href="#" style="text-decoration: none;" class="header-link lang">Italy</a></li>

のaタグにborderの色を変更したいように見えますので、

jQuery(window).on('scroll', function () {

    if ($('header').height() < $(this).scrollTop()) { 
        $('header').addClass('change-color');
        $('.header-list a').addClass('color');
    }else {
        $('header').removeClass('change-color'); 
        $('.header-list a').removeClass('color'); 
    } 
});

のようにすれば、borderの色を変更することが可能だと思います。

もしくは、いっそのこと、以下のようにcolorクラスの取り外しをやめて、

jQuery(window).on('scroll', function () {

  if ($('header').height() < $(this).scrollTop()) { 
    $('header').addClass('change-color');
  }else {
    $('header').removeClass('change-color'); 
   } 
});

.lang {
  border: solid 2px #fff;
  padding: 4px;
  margin-right: 32px;
  font-size: 25px;
}
// langクラスとcolorクラスの要素
.lang.color {
  border: solid 2px #574643!important;
  padding: 4px;
  margin-right: 32px;
  font-size: 30px;
}

というセレクタを

.lang {
  border: solid 2px #fff;
  padding: 4px;
  margin-right: 32px;
  font-size: 25px;
}
// change-colorクラスの子孫にあるlangクラス要素
.change-color .lang {
  border: solid 2px #574643!important;
  padding: 4px;
  margin-right: 32px;
  font-size: 30px;
}

という形に変更しても良いと思います。

余談ですが、!importantを付けて優先度上げていますが、詳細度(セレクターが詳しければ優先度が上がります)の観点から、これらは必要なくて、

.lang {
  border: solid 2px #fff;
  padding: 4px;
  margin-right: 32px;
  font-size: 25px;
}
// change-colorクラスの子孫にあるlangクラス要素
.change-color .lang {
  border: solid 2px #574643;
  font-size: 30px;
}

以上長々と申しわけないですが、以上です。問題が解決されてたら嬉しいです。

Comments

[azaz_wb]

spanで試した時のままになってしまってました。すみません。
ご丁寧な回答ありがとうございます。
j Queryでの変更はできませんでしたが、CSSを変更するとできました。
ありがとうございました。