スクロール位置にjqueryを変更するCSSを

Question

私はCSSスタイルを、ページ上のどこにあるかに基づいて変更しようとしています。私はグーグル上のすべての同様のスレッドを読んできたが、このコードは私が望むものだと思われるが、うまくいかない。どんな助けでも大歓迎です。ありがとう。

私が修正したスクリプト： http://jsfiddle.net/BKnzr/151/

と私のテストページ（非作業）： http://newmedia.academyart.edu/~02225904/portfolio/test.html

と私が使用しようとしていますjqueryの：

// cache the elements 
var $container = $('#container'); 
var $nav = $('#a.nav'); 
var $home = $('#home'); 
var $about = $('#about'); 
var $work = $('#work'); 
var $contact = $('#contact'); 

// get the view area of #container 
var top=$(window).scrollTop(); 
var bottom = top + $container.height(); 

// run code when #container is scrolled 
$container.scroll(function() { 
if ($home.offset().top < bottom) { 
    $nav.css({"color":"green","font-size":"20px"}); 
} else if ($about.offset().top < bottom) { 
    $nav.css({"color":"green","font-size":"20px"}); 
} else if ($work.offset().top < bottom) { 
    $nav.css({"color":"green","font-size":"20px"}); 
} else { 
    $nav.css({"color":"green","font-size":"20px"}); 
} 
}); 

Answer 1

から#を削除しますvar $nav = $('#a.nav'); - aはIDではなくタグです

やナビゲーションの唯一のリンクは色付けを取得するよう代わりにこれを使用する：

$nav = $('#textlinks-container a.nav')

Answer 2

あなたが正常に単に「現在の」クラスを追加するプラグインを使用してアンカータグのテキストの色を変更することができるはずですliタグに。

これがまだあなたの目標である場合、問題はCSSにあります。あなたのスタイルシートの81行目で、li.current {color:red}は、先に宣言されたa.nav {color:#fff;}を上書きしません。より具体的なセレクターを使用する必要があります。li.current a {color:red;}

Answer 3

これは意味的に最適な解決策であるかどうかはわかりませんが、これは私の問題でうまくいきました。

$(document).ready(function(){ 

var container = $('#container'); 
var nav = $('a.nav'); 
var home = $('#home'); 
var about = $('#about'); 
var work = $('#work'); 
var contact = $('#contact'); 

$(window).scroll(function(){ 
    if ($(window).scrollTop() <= $('#about').offset().top - 360) 
    { 
$('a.nav-home').css({ 
    'color': '#2dc9b2', 
}); 
$('a.nav-about').css({ 
    'color': '#fff', 
}); 
$('a.nav-work').css({ 
    'color': '#fff', 
}); 
$('a.nav-contact').css({ 
    'color': '#fff', 
}); 
$("a.nav").removeClass("about-hover"); 
$("a.nav").addClass("home-hover"); 
$("a.nav").removeClass("work-hover"); 
$("a.nav").removeClass("contact-hover"); 
    } 

    else if ($(window).scrollTop() <= $('#about').offset().top * 2 - 360) { 
$('a.nav-home').css({ 
    'color': '#fff', 
}); 
$('a.nav-about').css({ 
    'color': '#e7ad4a', 
}); 
$('a.nav-work').css({ 
    'color': '#fff', 
}); 
$('a.nav-contact').css({ 
    'color': '#fff', 
}); 
$("a.nav").addClass("about-hover"); 
$("a.nav").removeClass("home-hover"); 
$("a.nav").removeClass("work-hover"); 
$("a.nav").removeClass("contact-hover"); 
    } 

    else if ($(window).scrollTop() <= $('#about').offset().top * 2.9999 - 360) { 
$('a.nav-home').css({ 
    'color': '#fff', 
}); 
$('a.nav-about').css({ 
    'color': '#fff', 
}); 
$('a.nav-work').css({ 
    'color': '#a22330', 
}); 
$('a.nav-contact').css({ 
    'color': '#fff', 
}); 
$("a.nav").removeClass("about-hover"); 
$("a.nav").removeClass("home-hover"); 
$("a.nav").addClass("work-hover"); 
$("a.nav").removeClass("contact-hover"); 
    } 

    else { 

$('a.nav-home').css({ 
    'color': '#fff', 
}); 
$('a.nav-about').css({ 
    'color': '#fff', 
}); 
$('a.nav-work').css({ 
    'color': '#fff', 
}); 
$('a.nav-contact').css({ 
    'color': '#374ad3', 
}); 
$("a.nav").removeClass("about-hover"); 
$("a.nav").removeClass("home-hover"); 
$("a.nav").removeClass("work-hover"); 
$("a.nav").addClass("contact-hover"); 
    } 
}); 
});