不同的地方窗口

Question

這裏改變一個div類是我的設置：http://jsfiddle.net/REGUs/

正如你可以點擊左邊的菜單上看到，頁面滾動到相關的信息和菜單項的外觀改變一個白色的背景等

我想頁面檢查它在哪裏，然後分別更新列表中的CSS，以便如果頁面正在看第二個標題菜單將第二個標題CSS更改爲樣式他們會點擊它。我知道這很羅嗦，可能沒有多大意義，很抱歉。

這裏是我認爲這是可行的：

我不知道有多少標題是每個頁面（我做在理論上，而且也有很多的網頁，我寧願有一些動態）上。所以我會用$("h2").length來檢查標題的數量。然後可能有一個循環來獲得每個（存儲在數組中？）的距離，然後每次窗口滾動，它開始加載或更改大小，一個函數將捕獲屏幕的位置，然後更新CSS。如果這是你將如何解決它，你能幫我把它放在一起，如果有更好的方法（可能是因爲我真的不使用JavaScript），請你讓我知道。

感謝， 克里斯

Answer 1

我想這帖子會會幫助你

jQuery to change content in div based on scroll position

編碼愉快:)

Answer 2

如果你不想一切從引導這裏是什麼你需要做的

http://jsfiddle.net/6t83p/1/花了一些時間，但它總是很有趣:)

$('.selectedNav').css('background-color', 'white'); 
$('.selectedNav').css('border-right', 'none'); 

$('.servicesNavItem').click(function() { 
    $(this).parent().css('background-color', 'white'); 
    $(this).parent().css('border-right', 'none'); 
    $('.selectedNav').css('background-color', '#eeeeee'); 
    $('.selectedNav').css('border-right', '1px solid #c7c7c7'); 
    $('.selectedNav').toggleClass("selectedNav"); 
    $(this).parent().toggleClass("selectedNav"); 
}); 

var y = $('.servicesLeft').offset().top - 50; 
    $(window).scroll(function() { 
    if ($(window).scrollTop() > y) 
     $('.servicesLeft').addClass('floating'); 
    else 
     $('.servicesLeft').removeClass('floating'); 
    }); 

$('#sideNav li a').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
    return false; 
}); 
/***** ADDED THE FOLLOWING CODE ******/ 
// get positions of all linked href 
var x = {}; 
$('#sideNav a').each(function(){ 
    var href = $(this).attr('href').replace('#',''); 
    x[href] = $('#'+href).offset().top; 
}); 

$(document).on('scroll', function(){ 
    var current_top = window.pageYOffset; 
    console.log(current_top); 
    var active = ''; 
    var min_value = 9999999; 
    $.each(x, function(index, value) { 
     // some big value 
     if(value >= current_top && value < min_value) 
     { 
      console.log(min_value); 
      min_value = value; 
      active = index; 
     } 
    }); 

    $('#sideNav li').removeAttr('style'); 
    $('#sideNav a[href="#'+active+'"]').parent('li').css({'background-color': 'white', 'border-right-style': 'none'}); 
});