javascript 视差板+导航

Posted 2021-05-04

<div class="panel-holder__navigation">
  <nav class="panel-navigation">
    <a id="nav-reflectie" href="#reflectie" class="panel-navigation__item">
      Reflectie
      <span class="panel-navigation__number">1</span>
    </a>
    <a id="nav-ambitie" href="#ambitie" class="panel-navigation__item">
      Ambitie
      <span class="panel-navigation__number">2</span>
    </a>
    <a id="nav-orientatie" href="#orientatie" class="panel-navigation__item">
      Oriëntatie
      <span class="panel-navigation__number">3</span>
    </a>
    <a id="nav-actie" href="#actie" class="panel-navigation__item">
      Actie
      <span class="panel-navigation__number">4</span>
    </a>
    <a id="nav-realisatie" href="#realisatie" class="panel-navigation__item">
      Realisatie
      <span class="panel-navigation__number">5</span>
    </a>
  </nav>
</div>

<main class="panel-holder">
<span id="reflectie"></span>
<section class="panel reflectie panel--last">
</section>
</main>

.panel-holder{
  height: 100%;
  position: relative;
  margin-bottom: 0;
}
.panel{
  box-sizing: border-box;
  margin-bottom: 0;

  @include media-md{
    padding-top: 150px;
    position: sticky;
    width: 100%;
    top: 0;
  }
}
.panel--last{
  position: relative;
}

$(document).scroll(function () {

    var scrollPos = $(document).scrollTop() + 100;
    $('.panel-navigation a').each(function () {
      var lastElement = $('.panel--last');
      var currLink = $(this);
      var refElement = $(currLink.attr("href"));
      if (refElement.next().position().top <= scrollPos && refElement.next().position().top + refElement.next().height() > scrollPos && lastElement.position().top + lastElement.height() > scrollPos) {
        $('nav a').removeClass("active");
          currLink.addClass("active");
        //console.log(currLink);
      }
    });

  });
  $(document).ready(function() {
    $( ".scroll-indicator" ).click(function() {
      $("html, body").animate({ scrollTop: $('.frontpage-five-steps').offset().top }, 1000);
    });
  });