js監聽滾動到相應的div
阿新 • • 發佈:2019-02-05
<nav> <ul> <li><a href="#About">About</a></li> <li><a href="#Skill">Skill</a></li> <li><a href="#Experience">Experience</a></li> <li><a href="#More">More</a></li> <li><a href="#Contact">Contact</a></li> </ul> </nav> <div id = "About"> </div> <div id = "Skill"> </div> <div id = "AExperience"> </div> <div id = "More"> </div> <div id = "Contact"> </div>
一、點選a跳轉到相應的div
var a = $('a[href]', 'nav');
a.click(function(){
var href = $(this).attr('href');
var o = $(href).offset();
$(window).scrollTop(o.top, 1000); //增加個動畫效果
});
二、頁面滾動時候,給上述a新增一個 ative的樣式
var a = $('a[href]', 'nav'); $(window).on('scroll', function() { a.removeClass('active'); for(var i = 0; i < a.length; i++) { var $a = a.eq(i), st = $(window).scrollTop(); var top = $a.offset().top; if (st >= top && st <= $a.height() + top) // top >= st >= top + height { $a.addClass('active'); //此處已經獲得了哪個a break; } } });