滾動直到組件可見時如何更改導航欄上的活動選項卡？

Question

我有一個帶有多個選項卡的導航欄，我可以單擊這些選項卡並將我滾動到組件（scrollToComponent），它還將該選項卡設置為活動選項卡。

我還想做相反的滾動，當一個組件可見時，它應該將相應的選項卡標記為活動選項卡。

我找到了這個 fiddle ，這正是我需要的，但它使用 Jquery，它滾動到的項目不是組件，它們都具有相同的高度。

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

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

Answer 1

回復自己，因為它可能對未來的某人有用：

我使用react-intersection-observer制作了這個代碼框示例。

它有一個自定義鈎子，可以讓您知道元素是否可見，然后您必須比較哪個元素在頂部，這樣您就可以決定要將哪個選項卡設置為活動選項卡。