在具有溢出属性的容器内滚动时突出显示导航链接

Question

我有一个容器，里面有很多可变的内容。当鼠标悬停在该部分时，我编写了一个突出显示导航栏中导航链接的函数。我的PM希望根据当前向用户呈现的部分来突出显示该部分。我如何找到div在容器内相对于折痕上方的偏移位置？这个位置甚至在可滚动容器中也会改变吗？我迷路了，已经破解了几天，它现在阻止了代码的发布。

我已经尝试过多次使用offsetHeight和offsettop计算此值，但是这些值没有改变。我不能使用jQuery。

document.addEventListener("DOMContentLoaded", function () {
  function refactorNavAnimation() {
    var sections = document.querySelectorAll(".refactor-section"),
        contentWrapper = document.querySelector(".listing-page-content");
    console.log(sections);

    contentWrapper.addEventListener("wheel", function() {
      sections.forEach(function (section) {
        var id = section.getAttribute("id"),
          activeSection = document.querySelector("a[href= '#" + id + "']"),
          position = section.offset;
        console.log(position);

        if (position <= 100) {
          console.log(position);
          removeActiveNavClass();
          activeSection.classList.add('active-nav-link');
        } else {
          removeActiveNavClass();
        }
      });
    });
  }

  refactorNavAnimation();
});

<main class="listing-page-content">
        <% if @open_negotiations.size > 0 || @closed_negotiations.size > 0 %>
          <section class="refactor-section" id="history-details-container">
            <%= render partial: "listings/partials/history/listing_page_history_wrapper", locals: {negotiation: @negotiation} %>
            <%# render partial: "refactor/partials/history/history-negotiation-header", locals: {negotiations: @negotiations} %>
            <%# render partial: "refactor/partials/history/this-negotiation", locals: {negotiations: @listing.negotiations} %>
          </section>
          <hr class="refactor-section-divider" id="hr-1">
        <% end %> 

        <section class="refactor-section" id="listing-details-container">
          <%= render partial: "listings/partials/listing_details", locals: {listing: @listing} %>
        </section>

        <hr class="refactor-section-divider" id="hr-2">

        <section class="refactor-section" id="estimator-container">
          <%= render partial: "listings/partials/estimator", locals: {listing: @listing} %>
        </section>

        <hr class="refactor-section-divider" id="hr-3">

        <section class="refactor-section" id="faqs-container">
          <%= render partial: "listings/partials/faqs", locals: {listing: @listing} %>
        </section>

        <hr class="refactor-section-divider" id="hr-4">

        <section class="refactor-section" id="stadium-details-container">
          <%= render partial: "listings/partials/stadium_info", locals: {listing: @listing} %>
        </section>

        <hr class="refactor-section-divider" id="hr-5">

        <section class="refactor-section" id="other-listings-container">
          <%= render partial: "listings/partials/other_listings", locals: {listing: @listing} %>
        </section>

      </main>