由于 header 偏移，活动导航 link 未显示在正确的部分

Question

在下面的示例中，我遇到了两个问题。

1 - 由于 header 偏移计算，当点击导航 link 时，活动导航 link 未显示在正确的部分，我认为它假设它没有到达指定的部分，你必须比活动 link 背景颜色突出显示更多地手动滚动 header 高度。

2 - 在滚动过程中突出显示每个 link 并产生令人不快的效果，例如当您在便利设施部分并单击联系人以到达联系人部分时.

const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".nav li");
window.addEventListener("scroll", () => {
  let current = "";
  sections.forEach((section) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= sectionTop - sectionHeight / 3) {
      current = section.getAttribute("id");
    }
  });

  navLi.forEach((li) => {
    li.classList.remove("active-link");
    if (li.classList.contains(current)) {
      li.classList.add("active-link");
    }
  });
});

/*Menu Toggle*/
$(".menu-toggle").click(function() {
  $(".nav").toggleClass("nav--open", 500);
  $(".overlay").toggleClass("showOverlay");
  $(this).toggleClass("open");
});

$(".overlay").click(function() {
  $(".menu-toggle").removeClass("open");
  $(".nav").toggleClass("nav--open");
  $(".overlay").removeClass("showOverlay");
});

$(".nav a").on("click", function() {
  $(".menu-toggle").removeClass("open");
  $(".nav").toggleClass("nav--open");
  $(".overlay").removeClass("showOverlay");
});

/*Smooth Scrolling*/
// Get the height of the header for offsetting
var headerHeight = $(".header-container").height();

// Attach the click event
$('.nav-link').bind("click", function(e) {

  var target = $(this).attr("href"); //Get the target
  var scrollToPosition = $(target).offset().top - headerHeight;

  $('html').animate({
    'scrollTop': scrollToPosition
  }, 900, function(target) {
    window.location.hash = target;
  });

  e.preventDefault();
});
<!--Back To Top Script-->
window.addEventListener('scroll', function() {
  var scroll = document.querySelector('.scrollTop');
  scroll.classList.toggle("active", window.scrollY > 500)
})

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}


/*My Special Menu*/

html {
  overflow-x: hidden;
}

.header-container {
  background: -webkit-linear-gradient(left, #7abff6 0%, #03a9f4 100%);
  color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

.container {
  /*width: 95%;
     max-width: 1000px;
    */
  width: 90%;
  max-width: 1600px;
  height: 84.4px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.logo__text {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 30px;
  padding: 18px;
}

.logo__text span {
  font-weight: 400;
  margin-left: 6px;
}

.logo__text1 {
  font-size: 13px;
  padding-left: 220px;
}

.logo__text1 h3 {
  font-weight: 300;
}


/*a.nav-link.availability-button {
            color: #ffffff !important;
            border-width: 0px !important;
            letter-spacing: 1.5px;
            font-size: 14px;
            font-weight: 700 !important;
            background-color: #edbb5f;
            padding-top: 10px !important;
            padding-right: 18px !important;
            padding-bottom: 10px !important;
            padding-left: 18px !important;
            margin-left: 10px;
            border-radius: 6px;
        }

        a.nav-link.availability-button:hover {
            -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            transform: translateY(-5px);
            background-color: #edbb5f;
            padding-top: 10px !important;
            padding-right: 18px !important;
            padding-bottom: 10px !important;
            padding-left: 18px !important;
            margin-left: 10px;
            border-radius: 6px;
        }*/

.nav a.active {
  color: #fff;
}

.nav {
  position: absolute;
  background: #fff;
  -webkit-clip-path: circle(0px at top right);
  clip-path: circle(0px at top right);
  transition: -webkit-clip-path ease-in-out 700ms;
  transition: clip-path ease-in-out 700ms;
  transition: clip-path ease-in-out 700ms, -webkit-clip-path ease-in-out 700ms;
}

.nav--open {
  -webkit-clip-path: circle(250% at top right);
  clip-path: circle(250% at top right);
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  border-bottom: 1px solid #575766;
  border-left: 1px solid #575766;
  border-right: 1px solid #575766;
}

.nav li:last-child {
  border-bottom: none;
}

@media screen and (max-width: 1240px) {
  /*.nav li:last-child {
                display: none;
            }*/
}

@media screen and (min-width: 1200px) {
  .check-button {
    display: none !important;
  }
}

.nav-link {
  color: #000;
  font-size: 14px;
  display: block;
  padding: 2em 4em 2em 1.5em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  outline: none;
}


/*.nav-link:hover,
        .nav-link:focus {
            background: #74d057;
            color: #fff;
        }*/

.nav--icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 1em;
  width: 1.1em;
  text-align: right;
  /*color: #000;*/
}

i.fas.fa-home.nav--icon {
  color: #552401;
}

i.far.fa-image.nav--icon {
  color: #9a57d8;
}

i.fas.fa-bed.nav--icon {
  color: #ef991f;
}

i.far.fa-thumbs-up.nav--icon {
  color: #5912d0;
}

i.fas.fa-sun.nav--icon {
  color: #f2da08;
}

i.fas.fa-envelope.nav--icon {
  color: #0a2fa0;
}

.menu-toggle {
  padding: 1em;
  padding-right: 50px;
  position: absolute;
  top: 1em;
  right: -25px;
  cursor: pointer;
  z-index: 3;
}

@media only screen and (min-width: 480px) {
  .menu-toggle {
    top: 1.6em;
  }
}

@media only screen and (max-width: 479px) {
  .container {
    height: 70px;
  }
  .menu-toggle {
    top: 1.2em;
  }
  .nav {
    top: 70px !important;
  }
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  background: #fff;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  -webkit-transition: all ease-in-out 500ms;
  -o-transition: all ease-in-out 500ms;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}

.hamburger::after {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}

.open .hamburger {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  -webkit-transform: translateY(-3px) rotate(-90deg);
  -ms-transform: translateY(-3px) rotate(-90deg);
  transform: translateY(-3px) rotate(-90deg);
}

@media only screen and (max-width: 982px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
  .nav-link:hover,
  .nav-link:focus {
    background: #74d057;
    color: #fff;
  }
}

@media only screen and (max-width: 602px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
}

@media only screen and (max-width: 480px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
}

@media only screen and (min-width: 983px) {
  .menu-toggle {
    display: none;
  }
  .nav {
    height: auto;
    position: relative;
    background: transparent;
    clip-path: initial;
    -webkit-clip-path: initial;
  }
  .nav li {
    display: inline-block;
    border: none;
  }
  .nav a {
    padding: 0.5em;
    /*margin-left: 1em;*/
    color: #fff;
  }
  .nav-item {
    position: relative;
  }
  .nav-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #edbb5f;
    transition: all 0.5s ease-in-out;
    z-index: -1;
  }
  .nav-item:hover:before {
    width: 100%;
  }
  nav ul li.active-link {
    background: #edbb5f;
  }
  /*.nav a:hover,
            .nav a:focus {
                background: #edbb5f;
                padding: 7px;
            }*/
  .nav--icon {
    display: none !important;
  }
}

@media only screen and (max-width: 480px) {
  .nav a {
    padding: 1.3em 2.5em 1.3em 1em;
  }
  .logo__text {
    padding: 18px 18px 18px 0;
    font-size: 22px;
    margin-left: 0;
  }
  .container {
    max-width: 480px;
  }
}

@media only screen and (max-width: 361px) {
  .logo__text {
    font-size: 20px;
  }
  .logo__text1 {
    font-size: 10px;
  }
}


/*End My Special Menu*/

.section-header-area {
  background: url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/villa-blueview-bg02.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 10px;
}

@media only screen and (max-width: 767px) {
  .section-header-area {}
}

.section-header {
  text-align: center;
}

.section-header h2 {
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 44px;
  color: #565656 !important;
  letter-spacing: 1px;
  line-height: 1.2em;
}

.section-header h2 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(left, #1e83ec 0%, #f6653c 100%);
}

strong {
  font-weight: 700;
}

.section-header h3 {
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 1.6vw;
  color: #767676 !important;
  letter-spacing: 1px;
  line-height: 1.2em;
}

@media only screen and (max-width: 980px) {
  .section-header h2 {
    font-size: 44px;
  }
  .section-header h3 {
    font-size: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .section-header h2 {
    font-size: 34px;
  }
  .section-header h3 {
    font-size: 16px;
  }
}

@media only screen and (max-width: 620px) {
  .section-header h2 {
    font-size: 28px;
  }
}


/*Back To Top*/

.scrollTop {
  position: fixed;
  bottom: 800px;
  right: 23px;
  width: 50px;
  height: 50px;
  background: #399cf1 url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/uparrow.png);
  border-radius: 50%;
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

.scrollTop.active {
  bottom: 100px;
  visibility: visible;
  opacity: 1;
}

.scrollTop:hover {
  background: #66b5f8 url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/uparrow.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100vh;
  z-index: 2;
}

.showOverlay {
  display: block;
}

@media only screen and (min-width: 983px) {
  /*to stop overlay coming into screen on desktop when clicked on menu links otherwise it brings overlay layer on top of sections then it needs to be clicked on to make it dissappear */
  .showOverlay {
    display: none;
  }
}

.hero-area {
  height: 800px;
  background-color: blanchedalmond;
}

.info-blurbs {
  height: 800px;
  background-color: red;
}

.container-grid-masonry {
  height: 700px;
  background-color: yellow;
}

.container-rooms {
  height: 700px;
  background-color: green;
}

.container-reviews {
  height: 700px;
  background-color: pink;
}

.container-activities {
  height: 700px;
  background-color: #ddd;
}

.container-contact {
  height: 1200px;
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollTop" onclick="scrollToTop();"></div>
<div class="header-container">
  <div class="container">
    <div class="logo__text">V&#304;lla<span>Mav&#304; Manzara</span>
      <div class="logo__text1">
        <h3>KA&#350; / ANTALYA</h3>
      </div>
    </div>
    <div class="overlay"></div>
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item amenities"><a class="nav-link" href="#amenities"><i class="fas fa-home nav--icon"></i>Amenities</a></li>
        <li class="nav-item gallery"><a class="nav-link" href="#gallery"><i class="far fa-image nav--icon"></i>Gallery</a></li>
        <li class="nav-item rooms"><a class="nav-link" href="#rooms"><i class="fas fa-bed nav--icon"></i>Rooms</a></li>
        <li class="nav-item reviews"><a class="nav-link" href="#reviews"><i class="far fa-thumbs-up nav--icon"></i>Reviews</a></li>
        <li class="nav-item activities"><a class="nav-link" href="#activities"><i class="fas fa-sun nav--icon"></i>Activities</a></li>
        <li class="nav-item contact"><a class="nav-link" href="#contact"><i class="fas fa-envelope nav--icon"></i>Contact</a></li>
        <!--<li class="nav-item"><a class="nav-link availability-button" href="https://www.airbnb.com/rooms/18783099">Check Availability</a></li>-->
      </ul>
    </nav>
    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
  </div>
</div>
<div class="hero-area"></div>
<!--Amenities Text--->
<section id="amenities" class="section-header-area">
  <div class="section-header">
    <h2><strong>Amenities</strong> Villa Mavi Manzara</h2>
  </div>
</section>
<!--Amenities Blurbs--->
<div class="info-blurbs">1</div>
<!--Gallery Text--->
<section id="gallery" class="section-header-area">
  <div class="section-header">
    <h2><strong>Photo</strong> Gallery</h2>
  </div>
</section>
<!--Gallery--->
<div class="container-grid-masonry">2</div>
<!--Room Details Text--->
<section id="rooms" class="section-header-area">
  <div class="section-header">
    <h2><strong>Room</strong> Details</h2>
  </div>
</section>
<!--Rooms-->
<div class="container-rooms">3</div>
<!--Review Text--->
<section id="reviews" class="section-header-area">
  <div class="section-header">
    <h2><strong>Reviews</strong> Villa Mavi Manzara</h2>
  </div>
</section>
<!--Reviews-->
<div class="container-reviews">4</div>
<!--Activities Text--->
<section id="activities" class="section-header-area">
  <div class="section-header">
    <h2><strong>Activities</strong> Villa Mavi Manzara</h2>
  </div>
</section>
<!--Activities-->
<div class="container-activities">5</div>
<!--Contact Text--->
<section id="contact" class="section-header-area">
  <div class="section-header">
    <h2><strong>Contact</strong> Us</h2>
  </div>
</section>
<!--Contact Section-->
<div class="container-contact">6</div>

Answer 1

我花了一些时间调试你的 JS，但没有发现任何让我印象深刻的东西。然后我开始查看你的 HTML 并意识到你在每个部分之间的 <div> 正在丢弃你的 anchor 标签，使得在点击 [= 时部分的开头不显示17=]。因此使它们看起来“偏移”。

如果没有额外的 JS，您可以通过在每个相应部分中嵌套 <div> 来解决此问题。

例如~你有这个：

<!--Gallery Text--->
<section id="gallery" class="section-header-area">
  <div class="section-header">
    <h2><strong>Photo</strong> Gallery</h2>
  </div>
</section>
<!--Gallery--->
<div class="container-grid-masonry">2</div>
<!-- div should be nested within section to not throw off anchor -->

应该是这样的：

<!--Gallery Text--->
<section id="gallery" class="section-header-area">
  <div class="section-header">
    <h2><strong>Photo</strong> Gallery</h2>
  </div>
  <!--Gallery--->
  <div class="container-grid-masonry">2</div>
</section>

看到它在这里工作：

const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll(".nav li");
window.addEventListener("scroll", () => {
  let current = "";
  sections.forEach((section) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (pageYOffset >= sectionTop - sectionHeight / 3) {
      current = section.getAttribute("id");
    }
  });

  navLi.forEach((li) => {
    li.classList.remove("active-link");
    if (li.classList.contains(current)) {
      li.classList.add("active-link");
    }
  });
});

/*Menu Toggle*/
$(".menu-toggle").click(function() {
  $(".nav").toggleClass("nav--open", 500);
  $(".overlay").toggleClass("showOverlay");
  $(this).toggleClass("open");
});

$(".overlay").click(function() {
  $(".menu-toggle").removeClass("open");
  $(".nav").toggleClass("nav--open");
  $(".overlay").removeClass("showOverlay");
});

$(".nav a").on("click", function() {
  $(".menu-toggle").removeClass("open");
  $(".nav").toggleClass("nav--open");
  $(".overlay").removeClass("showOverlay");
});

/*Smooth Scrolling*/
// Get the height of the header for offsetting
var headerHeight = $(".header-container").height();

// Attach the click event
$('.nav-link').bind("click", function(e) {

  var target = $(this).attr("href"); //Get the target
  var scrollToPosition = $(target).offset().top - headerHeight;

  $('html').animate({
    'scrollTop': scrollToPosition
  }, 900, function(target) {
    window.location.hash = target;
  });

  e.preventDefault();
});
<!--Back To Top Script-->
window.addEventListener('scroll', function() {
  var scroll = document.querySelector('.scrollTop');
  scroll.classList.toggle("active", window.scrollY > 500)
})

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth',
  })
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}


/*My Special Menu*/

html {
  overflow-x: hidden;
}

.header-container {
  background: -webkit-linear-gradient(left, #7abff6 0%, #03a9f4 100%);
  color: #fff;
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

.container {
  /*width: 95%;
     max-width: 1000px;
    */
  width: 90%;
  max-width: 1600px;
  height: 84.4px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.logo__text {
  text-transform: uppercase;
  font-weight: 700;
  font-size: 30px;
  padding: 18px;
}

.logo__text span {
  font-weight: 400;
  margin-left: 6px;
}

.logo__text1 {
  font-size: 13px;
  padding-left: 220px;
}

.logo__text1 h3 {
  font-weight: 300;
}


/*a.nav-link.availability-button {
            color: #ffffff !important;
            border-width: 0px !important;
            letter-spacing: 1.5px;
            font-size: 14px;
            font-weight: 700 !important;
            background-color: #edbb5f;
            padding-top: 10px !important;
            padding-right: 18px !important;
            padding-bottom: 10px !important;
            padding-left: 18px !important;
            margin-left: 10px;
            border-radius: 6px;
        }

        a.nav-link.availability-button:hover {
            -webkit-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            transform: translateY(-5px);
            background-color: #edbb5f;
            padding-top: 10px !important;
            padding-right: 18px !important;
            padding-bottom: 10px !important;
            padding-left: 18px !important;
            margin-left: 10px;
            border-radius: 6px;
        }*/

.nav a.active {
  color: #fff;
}

.nav {
  position: absolute;
  background: #fff;
  -webkit-clip-path: circle(0px at top right);
  clip-path: circle(0px at top right);
  transition: -webkit-clip-path ease-in-out 700ms;
  transition: clip-path ease-in-out 700ms;
  transition: clip-path ease-in-out 700ms, -webkit-clip-path ease-in-out 700ms;
}

.nav--open {
  -webkit-clip-path: circle(250% at top right);
  clip-path: circle(250% at top right);
}

.nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  border-bottom: 1px solid #575766;
  border-left: 1px solid #575766;
  border-right: 1px solid #575766;
}

.nav li:last-child {
  border-bottom: none;
}

@media screen and (max-width: 1240px) {
  /*.nav li:last-child {
                display: none;
            }*/
}

@media screen and (min-width: 1200px) {
  .check-button {
    display: none !important;
  }
}

.nav-link {
  color: #000;
  font-size: 14px;
  display: block;
  padding: 2em 4em 2em 1.5em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  outline: none;
}


/*.nav-link:hover,
        .nav-link:focus {
            background: #74d057;
            color: #fff;
        }*/

.nav--icon {
  display: inline-block;
  font-size: 1.5em;
  margin-right: 1em;
  width: 1.1em;
  text-align: right;
  /*color: #000;*/
}

i.fas.fa-home.nav--icon {
  color: #552401;
}

i.far.fa-image.nav--icon {
  color: #9a57d8;
}

i.fas.fa-bed.nav--icon {
  color: #ef991f;
}

i.far.fa-thumbs-up.nav--icon {
  color: #5912d0;
}

i.fas.fa-sun.nav--icon {
  color: #f2da08;
}

i.fas.fa-envelope.nav--icon {
  color: #0a2fa0;
}

.menu-toggle {
  padding: 1em;
  padding-right: 50px;
  position: absolute;
  top: 1em;
  right: -25px;
  cursor: pointer;
  z-index: 3;
}

@media only screen and (min-width: 480px) {
  .menu-toggle {
    top: 1.6em;
  }
}

@media only screen and (max-width: 479px) {
  .container {
    height: 70px;
  }
  .menu-toggle {
    top: 1.2em;
  }
  .nav {
    top: 70px !important;
  }
}

.hamburger,
.hamburger::before,
.hamburger::after {
  content: "";
  display: block;
  background: #fff;
  height: 3px;
  width: 1.75em;
  border-radius: 3px;
  -webkit-transition: all ease-in-out 500ms;
  -o-transition: all ease-in-out 500ms;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}

.hamburger::after {
  -webkit-transform: translateY(3px);
  -ms-transform: translateY(3px);
  transform: translateY(3px);
}

.open .hamburger {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  -webkit-transform: translateY(-3px) rotate(-90deg);
  -ms-transform: translateY(-3px) rotate(-90deg);
  transform: translateY(-3px) rotate(-90deg);
}

@media only screen and (max-width: 982px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
  .nav-link:hover,
  .nav-link:focus {
    background: #74d057;
    color: #fff;
  }
}

@media only screen and (max-width: 602px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
}

@media only screen and (max-width: 480px) {
  .nav {
    right: 1px !important;
    top: 84.4px;
    z-index: 15;
  }
}

@media only screen and (min-width: 983px) {
  .menu-toggle {
    display: none;
  }
  .nav {
    height: auto;
    position: relative;
    background: transparent;
    clip-path: initial;
    -webkit-clip-path: initial;
  }
  .nav li {
    display: inline-block;
    border: none;
  }
  .nav a {
    padding: 0.5em;
    /*margin-left: 1em;*/
    color: #fff;
  }
  .nav-item {
    position: relative;
  }
  .nav-item:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #edbb5f;
    transition: all 0.5s ease-in-out;
    z-index: -1;
  }
  .nav-item:hover:before {
    width: 100%;
  }
  nav ul li.active-link {
    background: #edbb5f;
  }
  /*.nav a:hover,
            .nav a:focus {
                background: #edbb5f;
                padding: 7px;
            }*/
  .nav--icon {
    display: none !important;
  }
}

@media only screen and (max-width: 480px) {
  .nav a {
    padding: 1.3em 2.5em 1.3em 1em;
  }
  .logo__text {
    padding: 18px 18px 18px 0;
    font-size: 22px;
    margin-left: 0;
  }
  .container {
    max-width: 480px;
  }
}

@media only screen and (max-width: 361px) {
  .logo__text {
    font-size: 20px;
  }
  .logo__text1 {
    font-size: 10px;
  }
}


/*End My Special Menu*/

.section-header-area {
  background: url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/villa-blueview-bg02.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 30px 10px;
}

@media only screen and (max-width: 767px) {
  .section-header-area {}
}

.section-header {
  text-align: center;
}

.section-header h2 {
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 44px;
  color: #565656 !important;
  letter-spacing: 1px;
  line-height: 1.2em;
}

.section-header h2 {
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(left, #1e83ec 0%, #f6653c 100%);
}

strong {
  font-weight: 700;
}

.section-header h3 {
  font-family: "Lato", Helvetica, Arial, Lucida, sans-serif;
  font-weight: 300;
  font-size: 1.6vw;
  color: #767676 !important;
  letter-spacing: 1px;
  line-height: 1.2em;
}

@media only screen and (max-width: 980px) {
  .section-header h2 {
    font-size: 44px;
  }
  .section-header h3 {
    font-size: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .section-header h2 {
    font-size: 34px;
  }
  .section-header h3 {
    font-size: 16px;
  }
}

@media only screen and (max-width: 620px) {
  .section-header h2 {
    font-size: 28px;
  }
}


/*Back To Top*/

.scrollTop {
  position: fixed;
  bottom: 800px;
  right: 23px;
  width: 50px;
  height: 50px;
  background: #399cf1 url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/uparrow.png);
  border-radius: 50%;
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 10;
  visibility: hidden;
  opacity: 0;
  transition: 0.5s;
}

.scrollTop.active {
  bottom: 100px;
  visibility: visible;
  opacity: 1;
}

.scrollTop:hover {
  background: #66b5f8 url(https://villablueview.cloudaccess.host/wp-content/uploads/2021/08/uparrow.png);
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
}

.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100vh;
  z-index: 2;
}

.showOverlay {
  display: block;
}

@media only screen and (min-width: 983px) {
  /*to stop overlay coming into screen on desktop when clicked on menu links otherwise it brings overlay layer on top of sections then it needs to be clicked on to make it dissappear */
  .showOverlay {
    display: none;
  }
}

.hero-area {
  height: 800px;
  background-color: blanchedalmond;
}

.info-blurbs {
  height: 800px;
  background-color: red;
}

.container-grid-masonry {
  height: 700px;
  background-color: yellow;
}

.container-rooms {
  height: 700px;
  background-color: green;
}

.container-reviews {
  height: 700px;
  background-color: pink;
}

.container-activities {
  height: 700px;
  background-color: #ddd;
}

.container-contact {
  height: 1200px;
  background-color: lightblue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scrollTop" onclick="scrollToTop();"></div>
<div class="header-container">
  <div class="container">
    <div class="logo__text">V&#304;lla<span>Mav&#304; Manzara</span>
      <div class="logo__text1">
        <h3>KA&#350; / ANTALYA</h3>
      </div>
    </div>
    <div class="overlay"></div>
    <nav class="nav">
      <ul class="nav-list">
        <li class="nav-item amenities"><a class="nav-link" href="#amenities"><i class="fas fa-home nav--icon"></i>Amenities</a></li>
        <li class="nav-item gallery"><a class="nav-link" href="#gallery"><i class="far fa-image nav--icon"></i>Gallery</a></li>
        <li class="nav-item rooms"><a class="nav-link" href="#rooms"><i class="fas fa-bed nav--icon"></i>Rooms</a></li>
        <li class="nav-item reviews"><a class="nav-link" href="#reviews"><i class="far fa-thumbs-up nav--icon"></i>Reviews</a></li>
        <li class="nav-item activities"><a class="nav-link" href="#activities"><i class="fas fa-sun nav--icon"></i>Activities</a></li>
        <li class="nav-item contact"><a class="nav-link" href="#contact"><i class="fas fa-envelope nav--icon"></i>Contact</a></li>
        <!--<li class="nav-item"><a class="nav-link availability-button" href="https://www.airbnb.com/rooms/18783099">Check Availability</a></li>-->
      </ul>
    </nav>
    <div class="menu-toggle">
      <div class="hamburger"></div>
    </div>
  </div>
</div>
<div class="hero-area"></div>
<!--Amenities Text--->
<section id="amenities" class="section-header-area">
  <div class="section-header">
    <h2><strong>Amenities</strong> Villa Mavi Manzara</h2>
  </div>
  <!--Amenities Blurbs--->
  <div class="info-blurbs">1</div>
</section>

<!--Gallery Text--->
<section id="gallery" class="section-header-area">
  <div class="section-header">
    <h2><strong>Photo</strong> Gallery</h2>
  </div>
  <!--Gallery--->
  <div class="container-grid-masonry">2</div>
</section>

<!--Room Details Text--->
<section id="rooms" class="section-header-area">
  <div class="section-header">
    <h2><strong>Room</strong> Details</h2>
  </div>
  <!--Rooms-->
  <div class="container-rooms">3</div>
</section>

<!--Review Text--->
<section id="reviews" class="section-header-area">
  <div class="section-header">
    <h2><strong>Reviews</strong> Villa Mavi Manzara</h2>
  </div>
  <!--Reviews-->
  <div class="container-reviews">4</div>
</section>

<!--Activities Text--->
<section id="activities" class="section-header-area">
  <div class="section-header">
    <h2><strong>Activities</strong> Villa Mavi Manzara</h2>
  </div>
  <!--Activities-->
  <div class="container-activities">5</div>
</section>

<!--Contact Text--->
<section id="contact" class="section-header-area">
  <div class="section-header">
    <h2><strong>Contact</strong> Us</h2>
  </div>
  <!--Contact Section-->
  <div class="container-contact">6</div>
</section>

编辑 ~ Codepen 不会使 .nav-items 背景颜色在从上到下跳动。此外，解决了“便利设施”在页面顶部时突出显示的问题。

由于 header 偏移，活动导航 link 未显示在正确的部分

Active nav link is not shown at the correct section because of header offset

html

javascript

css

anchor

jquery