質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1193閲覧

jsで付け替えたクラスにcssが適用されないですm(__)m

harubo

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/01/27 03:34

現在、ヘッダーのコーデイングをしておりまして、行き詰ってしまいました。

内容は,「スクロール量に応じてヘッダーのクラスを付け替える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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

sassを動作させていなかっただけでした。。。

投稿2019/01/27 03:51

harubo

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問