滾動到僅從第一個元素工作的導航

我是JavaScript的初學者，無法完全掌握需要更改的工作。滾動到僅從第一個元素工作的導航

這是link。

我有一個可摺疊的固定導航的容器。您應該能夠點擊每個導航項並滾動到該章節。事情是：它只能從頂層或'第1章'起作用。當我點擊導航章節兩次時，它會上下移動，不只是簡單地轉到它的錨點。

這是我發現，當我有它設置了無固定導航的JavaScript - 要改變什麼，它的工作我想?:

function scrollNav() { 
    $('.nav a').click(function(){ 
    //Toggle Class 
    $(".active").removeClass("active"); 
    $(this).closest('li').addClass("active"); 
    var theClass = $(this).attr("class"); 
    $('.'+theClass).parent('li').addClass('active'); 
    //Animate 
    $('#container').stop().animate({ 
     scrollTop: $( $(this).attr('href')).offset().top - 180 
    }, 400); 
    return false; 
    }); 
    $('.scrollTop a').scrollTop(); 
} 
scrollNav();

非常感謝的方式！

來源

2017-06-28 D.Case

你能給我們一個https://jsfiddle.net/，顯示相同的行爲？ – ebbishop

我不認爲'$（$（this）.attr（'href'））。offset（）。top'可以做你認爲它的功能，但是如果不能輕鬆地檢查js＆html – ebbishop

嗨Ebbishop，謝謝你的回覆。這是我第一次設置jsfiddle：這裏是鏈接。 https://jsfiddle.net/fhyjgop7/ 雖然我無法讓javascript工作。我讀了一些stackoverflow線程，看看如何解決（改變js菜單，以無包裝），但沒有運氣。我已經添加了粘性標題，爲了這個容器的完整感覺。也可能與問題有關。 Thankyou –

查看此更新fiddle。我添加了jquery庫和一個用於調試的控制檯。

有我看上的兩個主要問題：

首先，使用.position()代替.offset()這裏。偏移總是相對於文檔而位置是相對於偏移父母（可能是也可能不是文檔）。見this answer。由於您對相對於父容器的位置感興趣，因此您應該使用.position().top。

一旦到位，就可以更容易地推斷出scrollTop的正確值。當您滾動瀏覽目標元素時，其相對於#container的位置將爲負值。如果chapterPosition是-300和當前的scrollTop的是1000，我們要滾動到700

但是請注意，這是因爲#container DIV固定位置。在上面的小提琴中，我提出了一種替代方法來計算滾動，如果你不想粘頭&因此不需要修復#container。

來源

2017-06-29 14:04:15 ebbishop

滾動到僅從第一個元素工作的導航

回答

相關問題