ページの現在地による要素へのclassの追加

質問

現在ホームページを作成しようとしていまして、HTML5で書かれているサイトを見て回っていましたら、東京大学TLOのサイト(http://www.casti.co.jp/)にたどり着きました。

このサイトでは、ページをスクロールすると、ページ左側のナビゲーションがページに同調して、表示されたセクションのリンクが選択された状態になります。

FirefoxのアドオンであるFirebugでソースを監視しながら見ていると、表示されているセクションをリンクしているli要素に、class="current"が追加されています。個人的には、javascriptか、それで記述されたJQueryで、表示領域の特定とclassの追加を行っていると思うのですが、ソースにそのような記述がありません。私がjavascriptやJQueryにあまり明るくないために見つけられないだけかもしれませんが。。。

面白い技術ですので、ぜひ理解し、できれば今後のHP作成に生かしたいと思うのですが、どなたか説明していただけないでしょうか？
よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

同サイトのjs/script.jsに、
function setControls() {
if(oB.settings.showDots) {
$('#ob_dots').find('li').each(function(){
var i = 'ob_dot' + obj.data('ob_data').ob_index;
if($(this).attr('id') === i) { $(this).addClass('current'); }
else { $(this).removeClass('current'); }
});
}
の記述がありますけど・・・

Firefoxのアドオン・・・JSViewsでどうぞ・・

お礼

<script src="js/script.js"></script>を見逃してました。
ここにちゃんとありましたね。

ありがとうございます。

回答No.2

神崎 渉瑠（@taloo）

スクロールの処理はwindow.onscrollです。

jQueryを使う場合は$(window).scroll()というのがあります。
http://api.jquery.com/scroll/

お礼

ちゃんと、<script src="js/script.js"></script>ありました。

ありがとうございます。