滾動時更改項目的類別

我有一個導航設置，單擊鏈接時，頁面向下滾動到列表中的相應項目，並在到達項目時更改鏈接的類別。滾動時更改項目的類別

<nav> 
<a href="#one" class="anchorLink">one</a> 
<a href="#two" class="anchorLink">two</a> </nav> 


<ul> 
    <li id="one"></li> 
    <li id="two"></li> 
</ul>

這裏是一個相當粗糙的示例

http://jsfiddle.net/FSk5Q/1/

我還要更改的項目的背景顏色，一旦它達到（優選衰落到一個新的顏色），然後還原當另一個項目滾動到另一個項目時，它是原始類，然後更改下一個項目的類。

我需要這個發生，當點擊並滾動到，所以：目標選項是不是很理想。

非常感謝您的建議。在js部門不太好。

來源

2013-03-05 xhadf

檢查了這一點：http://api.jquery.com/scroll/ – shubniggurath 2013-03-05 17:19:16

希望這至少可以讓你開始。我所做的是檢查偏移頂端是否小於文檔的滾動頂端（如果它在X像素內，也可以執行此操作）。

顏色漸變可以通過CSS3轉換完成。

$(document).on('scroll', function() { 
    $("li").each(function() { 
     if ($(this).offset().top <= $(document).scrollTop()) { 
      $("li").removeClass('highlight'); 
      $(this).addClass('highlight'); 
     } 
     else { 
      $(this).removeClass('highlight'); 
     } 
    }); 
});

http://jsfiddle.net/FSk5Q/6/

來源

2013-03-05 17:22:59

非常感謝，這是非常接近我所需要的。當物品到達頂層時，我會如何改變這個階層，目前它似乎必須在頂層變化之前通過頂層。 – xhadf 2013-03-05 22:11:32

@xhadf我想用'<='來比較。您也可以在*關閉*的頂部;就像'<= $（document）.scrollTop（）+ 10' – 2013-03-05 22:16:09

啊對，謝謝！ – xhadf 2013-03-05 22:27:22

我做了基於爆丸「一個固定的版本。希望這是你想要的。

$(document).on('scroll', function() 
{ 
    $("nav a").removeClass('highlight'); // reset all menu items 
    temp = $(); 
    $("li").each(function (i) // for each content blcok (you schould give them a class) 
    { 
     if ($(this).offset().top <= $(document).scrollTop()) // if it's position is above/at the page top 
     { 
      temp = $("nav a:nth-child("+(i+1)+")"); 
     } 
    }); 
    temp.addClass('highlight'); 
});

http://jsfiddle.net/maxmeuten/FSk5Q/8/

來源

2013-03-05 17:58:56

滾動時更改項目的類別

回答

相關問題