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

回答

相關問題