web-dev-qa-db-ja.com

jquery scroll、ページがスクロールしているときにセクションに関連してナビゲーションのアクティブクラスを変更します

http://jsfiddle.net/motocomdigital/gUWdJ/


私はjquery scrollテクニックの後、自分のプロジェクトに適応したいと思っています。

私のプロジェクト例をフィドルとしてご覧ください http://jsfiddle.net/motocomdigital/gUWdJ/

現在、私のnavリンクは_<section>_を基準にしたスクロールを自動的にアニメーション化することがわかります。

私の質問は、$(window).scrollメソッドを使用して、セクションがウィンドウの上部に達したときに_.active_クラスを_nav a_クラスに追加するにはどうすればよいですか？

したがって、たとえば、ユーザーが（ナビゲーションリンクの代わりに）ページを下にスクロールする場合、アクティブなクラスを相対ナビゲーションリンクに追加する必要があります。ページのどこにいるかを示します。

アクティブなクラスを削除し、ユーザーがページをスクロールダウンするたびに推測するたびに追加する必要があります。

また、固定ナビゲーションバーの28pxの高さ、上部ウィンドウのオフセットを考慮する必要があります。


誰でも私が試して使用または適応できるテクニックを見せてもらえますか、jsfiddleを使って見せてください:)


どんな助けでも大歓迎です、事前に感謝します！


http://jsfiddle.net/motocomdigital/gUWdJ/


enter image description here

jqueryjsfiddle
12
Joshc

より汎用的な機能が必要な場合：

デモを見る

$(window).scroll(function() {
    var windscroll = $(window).scrollTop();
    if (windscroll >= 100) {
        $('nav').addClass('fixed');
        $('.wrapper section').each(function(i) {
            if ($(this).position().top <= windscroll - 100) {
                $('nav a.active').removeClass('active');
                $('nav a').eq(i).addClass('active');
            }
        });

    } else {

        $('nav').removeClass('fixed');
        $('nav a.active').removeClass('active');
        $('nav a:first').addClass('active');
    }

}).scroll();​
42
A. Wolff

この方法で行うことができます： http://jsfiddle.net/gUWdJ/1/

$(window).scroll(function() {

    if ($(this).scrollTop() < $('section[data-anchor="top"]').offset().top) {
       $('nav a').removeClass('active');
    }

    if ($(this).scrollTop() >= $('section[data-anchor="top"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(0)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="news"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(1)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="products"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(2)').addClass('active');
    }
    if ($(this).scrollTop() >= $('section[data-anchor="contact"]').offset().top) {
      $('nav a').removeClass('active');
      $('nav a:eq(3)').addClass('active');
    }

});
7
Jai

メニュー項目を0ではなく負のトップ差で点灯させる必要があるため、A。Wolfからスクリプトを修正しました。これは、別の関数を作成するよりもはるかにうまく機能し、各メニュー項目のイベントをクリックします。また、このスクリプトを変更して、メニューの最後の項目を説明します。最後から2番目の項目があれば、自動的に強調表示されます。私は私のメインハイライト機能の外で各ループを処理したので、私のものは非常に似ていると思います。私の変更に関するもう1つの素晴らしい点は、メニュー項目内のリンク内に画像があることを考慮し、要素の高さを考慮し、その要素の下部がページの上部に当たるときです。新しいものが終了する前に終了します。

function highlight(item)
{
var itemTop = jQuery(item).position().top;

var windowTop = jQuery(window).scrollTop(); 
var topDifference = (windowTop - itemTop); 

var itemHeight = jQuery(item).height();
var bottomDifference = topDifference - itemHeight; 

var menuId = jQuery('#nav-icons li a').attr('href');
if (menuId = item)
{
    if(topDifference > -1 && bottomDifference < 0)
    {
        jQuery("#nav-icons li a[href='" + item + "']").parent().addClass('active');
        jQuery("#nav-icons li a[href!='" + item + "']").parent().removeClass('active');
    }
    else {
        jQuery("#nav-icons li a[href='" + item + "']").parent().removeClass('active');
    }
}
}
jQuery('#nav-icons li a').each(function(){
var eachAttr = jQuery(this).attr('href');
highlight(eachAttr);
});
0
Jason