フォントの色が<a>の場合、toggleClass（）で変更されません

私は、背景が透明になっているはずのメニューを持つHTML Webサイトを作成しています。メニュー項目はスクロールの上にユーザーがスクロールダウンしたときに、白の色で赤い背景を表示し、フェードインします。その目的のために、私は私のJavaScriptファイルにmain.jsをこの機能を書かれている：フォントの色が<a>の場合、toggleClass（）で変更されません

window.onscroll = function() { 
    if (window.scrollY === 1 || window.scrollY === 0) { 
     $(".menu").toggleClass("scroll"); 
     $(".menu a, li").toggleClass("fontScroll"); 
    } 
};

fontScrollは、元の色から、私のメニュー項目のフォントの色を変更し、私のCSS内の関数であります白に、黒、および機能そのため、このようなものです：私は3つのリストの私のメニューの項目は、タイトルと2つのリンクを持っている、といくつかの奇妙な理由でタイトルがその唯一のものです

.fontScroll { 
    color: rgb(250,250,245); 
}

リンクが同じ色のままになります。私は何か間違っているのですか？

ああ、ところで、私は：visitedとa：linkを設定しようとしましたが、うまくいきませんでした。

あなたが興味があれば私はcodepenを作成しました。事前に

感謝:)ここ

出典

2017-07-13 karirogg

HTMLコードが参考になります。また、 '$（"。menu a、li "）'はこの '$（" menu a li "）とします。 – fen1x

スクロールで' .menu a'の 'fontScroll'クラスを追跡していますか？？ – weBBer

あなたはソリューションhttps://codepen.io/Shiladitya/pen/jwdzxq

/*jslint browser: true*/ 
 
/*global $, jQuery, alert*/ 
 

 
function main() { 
 
    "use strict"; 
 
    window.onscroll = function() { 
 
     if (window.scrollY === 1 ||     window.scrollY === 0) { 
 
     $(".menu").toggleClass("scroll"); 
 
     $(".menu a, li").toggleClass("fontScroll"); 
 
    } 
 
    }; 
 
} 
 

 
$(document).ready(main);

.font { 
 
\t color: rgb(50, 50, 50); 
 
\t text-decoration: none; 
 
} 
 

 
.menu a:hover { 
 
\t color: rgb(100, 100, 100); 
 
} 
 

 
.menu { 
 
\t overflow: hidden; 
 
\t position: fixed; 
 
\t background-color: rgba(179, 0, 0, 0); 
 
\t height: auto; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
\t z-index: 100; 
 
    transition: all 0.4s; 
 
} 
 

 
.menu #title { 
 
\t font-size: 35px; 
 
} 
 

 
.menu #home { 
 
    margin-right: 6%; 
 
    margin-left: 12%; 
 
} 
 

 
.menu #about { 
 
    margin-right:0; 
 
} 
 

 
.menu li { 
 
\t display: inline-block; 
 
    transition: all 0.4s; 
 
} 
 

 
.spaceForScroll { 
 
    width: 100%; 
 
    height: 1500px; 
 
} 
 

 
.scroll { 
 
    background-color: rgba(179, 0, 0, 0.8); 
 
    transition: all 0.4s; 
 
} 
 

 
.fontScroll { 
 
    color: rgb(250,250,245); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
\t <head> 
 
\t \t <link href="style.css" type="text/css" rel="stylesheet"> 
 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
 
     <script src="main.js"></script> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <nav class="menu"> 
 
\t \t \t <ul id="titles"> 
 
\t \t \t \t <li id="title">Title</li> 
 
\t \t \t \t <li id="home"><a class="font" href="index.en.html">Home</a></li> 
 
\t \t \t \t <li id="about"><a class="font" href="about.en.html">About</a></li> 
 
\t \t \t </ul> 
 
    </nav> 
 
    <div class="spaceForScroll"></div> 
 
    </body> 
 
</html>

の代わりに、私はクラスを使用している要素をターゲットにして行きます。

出典

2017-07-13 13:25:35 Shiladitya

フォントの色が<a>の場合、toggleClass（）で変更されません

答えて

関連する問題