jQuery頁面滾動不變navbar href爲活動類

Question

我有一個單頁的網站。當我向下滾動時，我希望我的（固定）導航欄鏈接在達到特定div的位置時將狀態更改爲活動狀態。我使用jQuery但它不起作用。這裏是我的代碼：

// SMOOTH SCROLLING PAGES 

$(document).ready(function() { 
$(document).on("scroll", onScroll); 

//smoothscroll 
$('a[href^="#"]').on('click', function (e) { 
    e.preventDefault(); 
    $(document).off("scroll"); 

    $('a').each(function() { 
     $(this).removeClass('active'); 
    }) 
    $(this).addClass('active'); 

    var target = this.hash, 
     menu = target; 
    $target = $(target); 
    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top+2 
    }, 800, 'swing', function() { 
     window.location.hash = target; 
     $(document).on("scroll", onScroll); 
    }); 
    }); 
}); 

function onScroll(event){ 
var scrollPos = $(document).scrollTop(); 
$('main-navigation a').each(function() { 
    var currLink = $(this); 
    var refElement = $(currLink.attr("href")); 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
     $('main-navigation ul li a').removeClass("active"); 
     currLink.addClass("active"); 
    } 
    else{ 
     currLink.removeClass("active"); 
    } 
    }); 
}; 

這裏是我的HTML：

<nav id="main-navigation"> 
    <ul> 
    <li class="active"><a href="#site-main">Home</a></li> 
    <li><a href="#a">A</a></li> 
    <li><a href="#b">B</a></li> 
    <li><a href="#c">C</a></li> 
    <li><a href="#d">D</a></li> 
    </ul> 
</nav> 
<div id="a">DIV Alpha</div> 
<div id="b">DIV Bravo</div> 
<div id="c">DIV Charlie</div> 
<div id="d">DIV Delta</div> 

平滑滾動完美地工作，但是當我從滾動DIV #d備份導航欄裏活躍狀態不會改變。

Answer 1

這裏，我準備搗鼓你，我希望你在尋找什麼 - http://jsfiddle.net/skyr9999/dpuvcj5w

<div class="content"> 
    <div id="site-main">DIV Home</div> 
    <div id="a">DIV Alpha</div> 
    <div id="b">DIV Bravo</div> 
    <div id="c">DIV Charlie</div> 
    <div id="d">DIV Delta</div> 
</div> 

<nav id="main-navigation"> 
    <ul> 
     <li><a class="menuitem" href="#site-main">Home</a></li> 
     <li><a class="menuitem" href="#a">A</a></li> 
     <li><a class="menuitem" href="#b">B</a></li> 
     <li><a class="menuitem" href="#c">C</a></li> 
     <li><a class="menuitem" href="#d">D</a></li> 
    </ul> 
</nav> 

JS

$(document).ready(function() { 

    $('a[href^="#site-main"]').addClass('active'); 

//smoothscroll 
    $('.menuitem').on('click', function (e) { 
     e.preventDefault(); 
     // $(document).off("scroll"); 
     var athis = this; 
     var target = this.hash, 
       menu = target; 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top + 2 
     }, 800, 'swing', function() { 
      window.location.hash = target; 
      $('.menuitem').removeClass('active'); 
      $(athis).addClass('active'); 

     });  
    });  

    $(window).scroll(function (event) { 
     var scrollPos = $(document).scrollTop(); 
     if (scrollPos === 0) 
     { 
      $('a[href^="#site-main"]').addClass('active'); 
      return; 
     }  
     $('.menuitem').each(function() { 
      var currLink = $(this); 
      var refElement = $(currLink.attr("href")); 
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
       $('.menuitem').removeClass("active"); 
       currLink.addClass("active"); 
      } else { 
       currLink.removeClass("active"); 
      } 
     });  
    })  
}); 

因爲你不包括任何CSS，我即興一點，但它似乎工作得很好。

CSS

#a,#b,#c,#d,#site-main { height: 400px;} 
#main-navigation { 
    position: fixed; 
    top: 0px; 
    right:10px;   
} 

#main-navigation ul li { 
    display: inline; 
} 

.active { 
    background: #f00; 
} 

更新1 我更新代碼以匹配撥弄現在更改菜單項選擇，當你雙擊自動滾屏項

Answer 2

您可以通過與該列表項具有循環代替，並用#符號更正ID選擇：

$('#main-navigation li').each(function() { //<---correct id selector 
    var currLink = $(this); 
    var refElement = $(currLink.find('a').attr("href")); //<---find the anchor here 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
     $('#main-navigation ul li').removeClass("active"); //<---and here 
     currLink.addClass("active"); 
    } 
    else{ 
     currLink.removeClass("active"); 
    } 
}); 

Answer 3

你可以使用這個很酷的小插件來實現這個 https://github.com/davist11/jQuery-One-Page-Nav

這將增加當前類當你在一個特定的div或部分 希望這個幫助:)

Answer 4

替換

$('a').each(function() { $(this).removeClass('active'); }) $(this).addClass('active');

與

$('a').each(function() { 
    $(this).parent().removeClass('active'); 
}) 
$(this).parent().addClass('active'); 

完整代碼：

$('a[href^="#"]').on('click', function (e) { 
e.preventDefault(); 
$(document).off("scroll"); 

$('a').each(function() { 
    $(this).parent().removeClass('active'); 
}) 
$(this).parent().addClass('active'); 

var target = this.hash, 
    menu = target; 
$target = $(target); 
$('html, body').stop().animate({ 
    'scrollTop': $target.offset().top+2 
}, 800, 'swing', function() { 
    window.location.hash = target; 
}); 

}）;

無需onScroll功能