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

我不知道这在语义上是否是最佳解决方案，但这对我的问题起作用。

$(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");
  }
});
});

Answer 2

从#移除var $nav = $('#a.nav'); - 因为a是一个标记，而不是一个ID

或使用此代码，以便只有导航中的链接变为彩色：

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

Answer 3

您应该能够使用将“当前”类添加到li标记的插件成功更改锚标记文本的颜色。

如果这仍然是你的目标，问题出在css中。在样式表的第81行，li.current {color:red}不会覆盖先前声明的a.nav {color:#fff;}。您需要使用更具体的选择器：li.current a {color:red;}

希望这有帮助。

Jquery在滚动位置上改变css

3 个答案: