0

ユーザーがページの特定のセクションにスクロールするときにli要素を選択するのに助けが必要です。

進捗状況については、こちらをご覧ください：http: //jsfiddle.net/FvBqA/349/

「サービス」リンクをクリックすると、ページのそのセクションにいるときと同じように、テキストの色が赤に変わります。「ホーム」または「連絡先」をクリックした場合も同様です。

jqueryに関する考えは、cssが選択されたクラスを取得して、に従ってレンダリングできるように、クラスをLIに追加および削除できる必要があるということです。

機能はここで見ることができます：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ピクセル少なくし、ナビゲーションの高さとパディングを減らします。

更新：特定のセクションのみのセクションへの参照はありません。これは、展開したり、新しいリンクやセクションを追加したりしても、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 に答える