與jQuery

Question

滾動時當我滾動到我的網頁的某一部分，特定資產淨值丸節將亮起，如圖引導導航丸活動類錯誤：

它的工作原理就像預期因爲當我滾動到家庭和簡歷。然而，當我點擊，讓我們說簡歷，然後滾動 - 觀察會發生什麼，當我向下滾動聯繫人：

現在無論是簡歷和聯繫被突出顯示。當我拿走這段代碼時，它按預期工作。第一部分是平滑過渡滾動（點擊時），第二部分是滾動，都使用jQuery編寫。

//Smooth transition scroll when nav pill is clicked 
//When I take this code out, it works fine 
var anchor = $('html, body'); 
$('a').click(function(){ 
    $(anchor).animate({ 
     scrollTop: $($(this).attr('href')).offset().top 
    }, 500); 
    return false; 
}); 

//Change active class when scrolling 
$(window).scroll(function() { 
    var position = $(document).scrollTop(); 

    if (position <= home.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').removeClass('active'); 
    } 

    if (position >= home.top) { 
     $('.home-class').addClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').removeClass('active'); 
    } 

    if (position > resume.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').addClass('active'); 
     $('.contact-class').removeClass('active'); 
    } 

    if (position > contact.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').addClass('active'); 
    } 
}); 

如果有人能指出發生了什麼，我將不勝感激。

Answer 1

有一個合乎邏輯的問題。您應該首先比較位置較大的頂部位置。

例如如果resume.top是500，contact.top是700，位置是750 ..

$(window).scroll(function() { 
    var position = $(document).scrollTop(); 

    if (position <= home.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').removeClass('active'); 
    } 

    if (position >= home.top) { 
     $('.home-class').addClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').removeClass('active'); 
    } 
    /* .resume-class will have active class because 701 > 500 */ 
    if (position > resume.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').addClass('active'); 
     $('.contact-class').removeClass('active'); 
    } 

    /* .contact-class will have active class too because 701 > 700 */ 
    if (position > contact.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').addClass('active'); 
    } 
}); 

所以，你需要改變你的代碼，這樣

$(window).scroll(function() { 
    var position = $(document).scrollTop(); 

    if (position >= contact.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').addClass('active'); 
     return; 
    } 

    if (position >= resume.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').addClass('active'); 
     $('.contact-class').removeClass('active'); 
     return; 
    } 

    if (position >= home.top) { 
     $('.home-class').addClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').removeClass('active'); 
     return; 
    } 

    if (position < home.top) { 
     $('.home-class').removeClass('active'); 
     $('.resume-class').removeClass('active'); 
     $('.contact-class').removeClass('active'); 
    } 
});