jquery更改滚动位置上的css

我想根据页面上查看器的位置来更改css样式。我已经读过谷歌和这里的每个类似的线程，这段代码似乎是我想要的，但它不起作用。任何帮助将不胜感激。谢谢。jquery更改滚动位置上的css

和我的测试页面（非工作）： 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"}); 
} 
});

来源

2012-02-19 user1218670

你想改变背景颜色 – Prabhavith 2012-02-19 03:10:41

没有，这个插件等我有是增加一类，而我认为可能的工作，因为我想要的L1标签，但事实并非如此。我想要锚标签来改变颜色。 – user1218670 2012-02-19 03:17:44

不要使用'$'作为你的变量。如果它是一个jQuery对象或仅仅是一个变量，会令人困惑。 – Joseph 2012-02-19 04:04:11

从删除#var $nav = $('#a.nav'); - 因为a是标签而不是ID

或使用该代替，只有在导航链接获得彩色：

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

来源

2012-02-19 04:05:28 Joseph

呃，是一个小小的错误，但这并不是我所知道的破坏脚本的东西。似乎这个功能甚至没有开火。我一直在引用其他很多教程，并且对jQuery的知识知之甚少，应该改变链接颜色。 – user1218670 2012-02-19 04:25:07

jQuery中的这些“小错误”默默无闻。你有尝试过改变它们吗？ – Joseph 2012-02-19 04:30:51

是的，我改变了它，仍然没有。在浏览器控制台中，它表示Uncaught TypeError：无法读取null （匿名函数）的属性'top'。 – user1218670 2012-02-19 04:46:38

您应该能够成功地改变定位标记文本的颜色只使用，增加了“当前”类插件到李标签。

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

希望这会有所帮助。

来源

2012-02-19 06:41:06 brains911

感谢您的回应，我实际上最终做了类似这样的事情 – user1218670 2012-02-19 08:11:32

我不知道这是否是语义上最好的解决方案，但这对我的问题有效。

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

来源

2012-02-19 19:05:12 user1218670

jquery更改滚动位置上的css

回答

相关问题