高级jquery |滚动导航选择

Question

我需要选择一个li元素帮助当用户滚动到页面上的特定部分：

在这里看到我的进步：http://jsfiddle.net/FvBqA/349/

如果你点击“服务”链接文字颜色应该变成红色，因为你在页面的那一部分，如果你点击“主页”或“联系人”，也一样。

我有一个关于jQuery的想法是，你需要能够添加和删除类到LI，以便CSS可以拿起选定的类和渲染。

的功能都可以在这里看到：http://demicreative.com/#capabilities

如果向下滚动，看到工作区段你会发现导航项目中选择 - 我相同的功能后。

Answer 1

试试这个：

var header_height = $('#nav').outerHeight(); 
var sections = []; 
$('#nav a').each(function(){  
    var section = $(this.hash).offset() 
    sections.push({ 
     'link':$(this).parent(), 
     'top' : $(this.hash).offset().top-header_height, 
     'bottom' : $(this.hash).offset().top + $(this.hash).outerHeight() -header_height 
    }); 
}); 

$('#nav a').click(function(e) { 
    e.preventDefault(); 
    $('html,body').animate({ 
     scrollTop: $(this.hash).offset().top - header_height 
    }, 500); 
}); 


$(window).scroll(function(){ 
    for(var i = 0; i < sections.length; i++) 
     if($(window).scrollTop() >= sections[i].top && 
      $(window).scrollTop() <= sections[i].bottom){ 
      sections[i].link.addClass('selected') 
       .siblings().removeClass('selected'); 
     } 
});​ 

我直接连接的情况下在#nav链接。我将选定的类添加到父元素，并从父元素的同级中删除它。我也使滚动偏移量减少70 px，导航的高度和填充。

更新：没有提及任何特定的部分只有部分这意味着如果您展开，添加新的链接或部分，它仍然可以工作，而无需更新JavaScript。

小提琴： http://jsfiddle.net/iambriansreed/5Ta8j/

Answer 2

试试这个：

$(".scroll").click(function(e){ 
    e.preventDefault(); 
    $('html,body').animate({scrollTop:$($(this).attr('href')).offset().top - $('#nav').outerHeight()}, 500); 
    $('.scroll').removeClass('selected') 
    $(this).addClass('selected'); 
}); 

http://jsfiddle.net/FvBqA/354/

---

试试这个：

$(".scroll").click(function(e){ 
    e.preventDefault(); 
    $('html,body').animate({scrollTop:$($(this).attr('href')).offset().top - $('#nav').outerHeight()}, 500); 
    $('.scroll').removeClass('selected') 
    $(this).addClass('selected'); 
}); 

$(window).scroll(function(){ 
    var hdr = $('#header').offset().top - $('#nav').outerHeight(); 
    var svc = $('#services').offset().top - $('#nav').outerHeight(); 
    var ctt = $('#contact').offset().top - $('#nav').outerHeight(); 

    if ($(window).scrollTop() >= svc) { 
     $('.scroll').removeClass('selected') 
     $('a[href="#services"]').addClass('selected'); 
    }  

    if ($(window).scrollTop() >= ctt) { 
     $('.scroll').removeClass('selected') 
     $('a[href="#contact"]').addClass('selected'); 
    } 

}) 

http://jsfiddle.net/FvBqA/357/