由于標題偏移，活動導航鏈接未顯示在正確的部分-有解無憂

在下面的示例中，我遇到了兩個問題。

1 -由于標題偏移計算，當點擊導航鏈接時，活動導航鏈接未顯示在正確的部分，我認為它假設它沒有到達指定部分，您必須比活動鏈接背景顏色更手動地滾動標題高度強調。

2 -在滾動突出顯示通過每個鏈接并產生令人不快的效果，例如，當您在便利設施部分并單擊聯系人以到達聯系人部分時。

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 ><a  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>

uj5u.com熱心網友回復：

我花了一些時間除錯你的 JS，但沒有發現任何對我來說很重要的東西。然后我開始查看您的 HTML 并意識到<div>您在每個部分之間的 's 正在丟棄您的anchor標簽，當單擊nav-items. 因此使它們看起來“偏移”。

如果沒有額外的 JS，您可以通過將這些<div>'s 嵌套在每個相應的部分中來解決此問題。

例如~你有這個：

<!--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 ><a  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背景顏色跳來跳去。此外，解決了在頁面頂部突出顯示“設施”的問題。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/425041.html

標籤：javascript html jQuery css 锚

上一篇：懸停滑鼠指標時如何修復CSS背景顏色

下一篇：如何使用專門的CSS創建一個空圓圈？