如何在使用javascript滾動時保持課程活動？

我需要幫助指出我的javascript發生了什麼。我有一些代碼，當你在頁面的那一部分時，應該讓導航鏈接有一個活動的類，但它只是爲一對夫婦鏈接工作，當你滾動而不是在整個時間保持活動時它也會閃爍你在頁面的那一部分。以JSFiddle爲例https://jsfiddle.net/7szpuqsr/ - 如果您慢速滾動，您可以看到「家」在一瞬間變得活躍。我試圖讓每個鏈接在您點擊它時以及在頁面的整個部分都有活動類。如何在使用javascript滾動時保持課程活動？

我也有一個JavaScript粘滯導航欄和平滑滾動工作，所以我不知道是否可能有任何阻礙的方式？預先感謝您的幫助。

這裏的JavaScript的我想使用的活動類：

var sections = $('section') 
, nav = $('nav') 
, nav_height = nav.outerHeight(); 

$(window).on('scroll', function() { 
var cur_pos = $(this).scrollTop(); 

    sections.each(function() { 
    var top = $(this).offset().top - nav_height, 
    bottom = top + $(this).outerHeight(); 

    if (cur_pos >= top && cur_pos <= bottom) { 
    nav.find('a').removeClass('active'); 
    sections.removeClass('active'); 

    $(this).addClass('active'); 
    nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); 
    } 
    }); 
}); 

nav.find('a').on('click', function() { 
var $el = $(this) 
, id = $el.attr('href'); 

$('html, body').animate({ 
    scrollTop: $(id).offset().top - nav_height 
    }, 500); 

    return false; 
});

來源

2017-06-12 SShine2

那麼你的代碼刪除並添加滾動的活動類，所以它要走了閃爍。你可以設置一個條件，如果活動班已經在那裏，不要做任何事情 – Huangism

你能告訴我那是什麼樣子嗎？我仍然在學習JavaScript。 – SShine2

像這樣的事情？我不能在視覺上重現閃爍在我的機器上，但我可以看到被刪除的類/不斷補充上滾動

https://jsfiddle.net/7szpuqsr/1/

的主要變化，我添加了一個類你的部分，你有太多的部分，但與您的代碼是爲了工作的方式，它更容易添加一個類的部分，下面的例子

<section id="home" class="section">

var sections = $('.section')得到部分類

更新j的這部分s到檢查活動類

if (cur_pos >= top && cur_pos <= bottom) { 
    if(!$(this).hasClass("active")) { 
    nav.find('a').removeClass('active'); 
    sections.removeClass('active'); 

    $(this).addClass('active'); 
    nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active'); 
    } 
}

您也可以緩存$(this)到一個變量的部分循環內像

var $this = $(this);

就用$this爲循環的其餘部分

這裏是文檔hasClasshttps://api.jquery.com/hasclass/

來源

2017-06-12 20:09:31 Huangism

我還在玩弄你的建議，但主要的東西需要得到菜單，我希望只是一個班，我的部分！我認爲這可能與這些事情有關，因爲我的部分太多了。有另一雙眼睛是很好的。感謝你的幫助！ – SShine2

如何在使用javascript滾動時保持課程活動？

回答

相關問題