特定のポイントでフォントの色を変更するには、どのようにナビゲーションを設定しますか？

Question

私のサイトの上部には、基本的な水平ナビゲーションバーがあります。このサイトは、特定のポイントで異なる色の背景を持つ長い1ページのサイトです。私は特定のポイントでフォント色をある色から別の色に変更する方法を知りたがっていました。

Answer 1

あなたが望む量のウィンドウをスクロールした後、リンクにクラスを追加する必要があります。

だからあなたはあなたが

a.changeColor{color:green} 

を変更して（これらは、パフォーマンスのために悪いです）スクロールで機能を実行したいもののためにあなたのデフォルトの色そして

a{color:red;} 

とクラスを設定します

$window = $(window), 
$nav = $('.nav'), 
scrollTop = $window.scrollTop(); 

$window.scroll(function(){ 
    scrollTop = $window.scrollTop(); 
    if(scrollTop > 500){ 
    $nav.children('a').addClass('changeColor'); 
    }else{ 
    $nav.children('a').removeClass(); 
    } 
}) 

https://jsfiddle.net/hahrywa6/2/

これを編集してdivをターゲティングすることもできます。この方法で値をハードコードする必要はありません。これはあなたにとってより良いかもしれません。

これを行うには、navがヒットしたときにテキストの色を変更するdivをターゲットとする変数を作成します。

var yourDiv = $('.yourDivName').offset().top; 

先頭からオフセットを見つけます。 if文で同じscrollTop変数を使用するだけです。ウィンドウスクロールが要素以上の場合は、クラスを追加します。

var $window = $(window), 
$nav = $('.nav'), 
scrollTop = $window.scrollTop(), 
triggerDiv = $('#trigger-div').offset().top; 
$window.scroll(function(){ 
    scrollTop = $window.scrollTop(); 
    if(scrollTop > 500){ 
    $nav.children('a').removeClass().addClass('changeColor'); 
    }else{ 
    $nav.children('a').removeClass(); 
    } 
    if(scrollTop > triggerDiv){ 
    $nav.children('a').removeClass().addClass('changeColor2'); 
    } 
}) 

https://jsfiddle.net/hahrywa6/2/