Подсветка навигационных ссылок при прокрутке внутри контейнера со свойствами переполнения - PullRequest
Новая
       19

Подсветка навигационных ссылок при прокрутке внутри контейнера со свойствами переполнения

0 голосов
/ 30 мая 2019

У меня есть контейнер, в котором много переменного содержимого. Я написал функцию для подсветки навигационной ссылки в навигационной панели, когда указатель мыши находится над этим разделом. Мой премьер-министр хочет, чтобы раздел был выделен в зависимости от того, какой раздел в настоящее время представляется пользователю. Как найти положение смещения 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>
...