0

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

请参阅此处了解我的进度：http: //jsfiddle.net/FvBqA/349/

如果您单击“服务”链接，文本颜色应变为红色，就像您在页面的该部分一样，如果您单击“主页”或“联系人”，则再次相同。

我对 jquery 有一个想法，即您需要能够向 LI 添加和删除类，以便 css 可以拾取选定的类并按其进行渲染。

该功能可以在这里查看：http: //demicreative.com/#capabilities

如果您向下滚动并查看工作部分，您会注意到导航项被选中 - 我追求相同的功能。

4

2 回答 2

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/

于 2012-06-25T01:41:35.537 回答
0

尝试这个：

$(".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/

于 2012-06-25T01:45:56.277 回答