jquery - 固定侧边栏菜单不跳到正确的地方

Question

我在 flexbox 中做了以下布局，但跳转菜单是“position: fixed;”在侧边栏内。

浏览器窗口随着跳转菜单向下滚动，但菜单总是在相关部分的中间结束。

如何让菜单始终位于关联部分的顶部而不是中间？

这是一个代码笔 https://codepen.io/heavymessing/pen/MBEPyE

HTML:

    <main>
      <article>

        <div class="intro">
          <header class="intro__header">
            <h1 class="intro__heading">Services</h1>
            <p class="intro__intro">Services intro text</p>
          </header>
        </div>

        <div class="page">

          <aside>
            <nav class="navigation" id="mainNav">
              <a class="navigation__link" href="#1">Section 1</a>
              <a class="navigation__link" href="#2">Section 2</a>
              <a class="navigation__link" href="#3">Section 3</a>
              <a class="navigation__link" href="#4">Section 4</a>
            </nav>
          </aside>

          <div class="page-sections">
            <div class="page-section" id="1">
              <h1>Smooth scroll, fixed jump menu with active class</h1>
              <a class="arrow bounce" href="#2"></a>
            </div>

            <div class="page-section" id="2">
              <h1>Section Two</h1>
              <a class="arrow bounce" href="#3"></a>
            </div>

            <div class="page-section" id="3">
              <h1>Section Three</h1>
              <a class="arrow bounce" href="#4"></a>
            </div>

            <div class="page-section" id="4">
              <h1>Section Four</h1>
            </div>
          </div>
        </div>
      </article>

    </main>

SCSS:

    header,
    main,
    footer {
      max-width: 1200px;
      margin: 0 auto;
      width: 90%;
    }

    article {
      display: flex;
      flex-wrap: wrap;
    }

    .intro {
      width: 100%;
      padding: 30px;
      overflow: hidden;
      margin: 0;
      height: 200px;
      background-color: yellowgreen;
      overflow: hidden;
    }

    .page {
      overflow: hidden;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
    }

    .page-sections {
      width: 70%;
      margin: 0;
      padding: 0;
    }

    .page-section {
      height: 99vh;
      margin: 5% 0;
      padding: 2%;
      background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
      color: white;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);

      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }

    aside {
      overflow: hidden;
      width: 30%;
      background-color: orangered;
      margin: 0;
      padding: 0;

      .navigation {
        position: fixed;
        width: 18.1%;
        background-color: rgba(90, 90, 90, 0.84);
        color: #fff;
        margin: 0;
        padding: 0;

        &__link {
          display: block;
          color: #ddd;
          text-decoration: none;
          padding: 1em;
          font-weight: 400;

          &:hover {
            background-color: rgba(84, 84, 84, 0.74);
          }

          &.active {
            color: white;
            background-color: rgba(0, 0, 0, 0.1);
          }
        }
      }
    }

jQuery:

        $(document).ready(function() {
        $('a[href*=#]').bind('click', function(e) {
            e.preventDefault(); // prevent hard jump, the default behavior

            var target = $(this).attr("href"); // Set the target as variable

            // perform animated scrolling by getting top-position of target-element and set it as scroll target
            $('html, body').stop().animate({
                scrollTop: $(target).offset().top
            }, 600, function() {
                location.hash = target; //attach the hash (#jumptarget) to the pageurl
            });

            return false;
        });
    });

    $(window).scroll(function() {
        var scrollDistance = $(window).scrollTop();

        // Assign active class to nav links while scolling
        $('.page-section').each(function(i) {
            if ($(this).position().top <= scrollDistance) {
                $('.navigation a.active').removeClass('active');
                $('.navigation a').eq(i).addClass('active');
            }
        });
    }).scroll();

Answer 1

如果我理解更正您的查询，此解决方案将有效。我附上了代码片段，请检查并让我知道是否有任何疑问。在 jquery 和一行 css 中添加一个条件。当 body 滚动大于“intro”div 高度时，我向 body 添加了一个类，并且在添加的类的基础上，我将 top:0 给了你的“aside .navigation”类。

[https://codepen.io/ruchitaghodasara/pen/QBadVx]