javascript单naV页面

Question

嗨，伙计们，ı有几个问题，ı是在单页网站上工作(为了练习)。ı仍然没有完成网站，但是ı没有什么问题。

• 在页面的左边有一个导航。当你在页面的某一段时，左边的导航会根据该区域发光。
• 但是FİRST问题是边应该发光不能正常工作。这是一种工作方式，但是有一些but，比如当你快速滚动页面时--超过几个辉光出现在moment).

中--

• (只有一种辉光应该出现在

• 中

，

• ，第二个问题是，有一段时间，我没有看到部分，也没有发光部分的导航。it.

• ı试图延长它使问题看起来更少的部分，但并没有解决

• THİRD的问题在于代码的效率，ı尝试了一些东西，但是它们都没有起作用，所以ı不得不使用太多的'if‘和'if of’。ugly

• 看上去很像

以下是代码：

const allSection = document.querySelectorAll(".section");
const allList = document.querySelectorAll(".list");
const list_1 = document.querySelector(".list-1");
const list_2 = document.querySelector(".list-2");
const list_3 = document.querySelector(".list-3");
const list_4 = document.querySelector(".list-4");
const list_5 = document.querySelector(".list-5");
const list_6 = document.querySelector(".list-6");
const list_7 = document.querySelector(".list-7");
const list_8 = document.querySelector(".list-8");

const markList = function (entries, observer) {
  const [entry] = entries;
  console.log(entry);

  allSection.forEach(function (sect, i) {
    allList.forEach(function (list, index) {
      sect.classList.remove("mark");
      if (
        entry.isIntersecting &&
        entry.target.classList.contains(`section-1`)
      ) {
        list_1.classList.add("mark");
      }
      if (
        !entry.isIntersecting &&
        !entry.target.classList.contains(`section-1`)
      ) {
        list_1.classList.remove("mark");
      }
      if (
        entry.isIntersecting &&
        entry.target.classList.contains(`section-2`)
      ) {
        list_2.classList.add("mark");
      }
      if (
        !entry.isIntersecting &&
        !entry.target.classList.contains(`section-2`)
      ) {
        list_2.classList.remove("mark");
      }
      if (
        entry.isIntersecting &&
        entry.target.classList.contains(`section-3`)
      ) {
        list_3.classList.add("mark");
      }
      if (
        !entry.isIntersecting &&
        !entry.target.classList.contains(`section-3`)
      ) {
        list_3.classList.remove("mark");
      }
      if (
        entry.isIntersecting &&
        entry.target.classList.contains(`section-4`)
      ) {
        list_4.classList.add("mark");
      }
      if (
        !entry.isIntersecting &&
        !entry.target.classList.contains(`section-4`)
      ) {
        list_4.classList.remove("mark");
      }
      if (
        entry.isIntersecting &&
        entry.target.classList.contains(`section-5`)
      ) {
        list_5.classList.add("mark");
      }
      if (
        !entry.isIntersecting &&
        !entry.target.classList.contains(`section-5`)
      ) {
        list_5.classList.remove("mark");
      }
      if (
        entry.isIntersecting &&
        entry.target.classList.contains(`section-6`)
      ) {
        list_6.classList.add("mark");
      }
      if (
        !entry.isIntersecting &&
        !entry.target.classList.contains(`section-6`)
      ) {
        list_6.classList.remove("mark");
      }if (
        entry.isIntersecting &&
        entry.target.classList.contains(`section-7`)
      ) {
        list_7.classList.add("mark");
      }
      if (
        !entry.isIntersecting &&
        !entry.target.classList.contains(`section-7`)
      ) {
        list_7.classList.remove("mark");
      }
      if (
        entry.isIntersecting &&
        entry.target.classList.contains(`section-8`)
      ) {
        list_8.classList.add("mark");
      }
      if (
        !entry.isIntersecting &&
        !entry.target.classList.contains(`section-8`)
      ) {
        list_8.classList.remove("mark");
      }
    });
  });
};

//
//    if(entry.isIntersecting && entry.target.classList.contains(`section-${it}`)){
//
//        allList.forEach(l=>l.classList.remove('mark'))
//        allList[it].classList.add('mark')
//    }
//    else return;
//}
const sectObserver = new IntersectionObserver(markList, {
  root: null,
  threshold: 0.4,
});

allSection.forEach((sect) => sectObserver.observe(sect));

* {
  font-weight: 300;
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 100;
  background-color: #fff;
  font-family: "Lato", sans-serif;
}
h1 {
  font-weight: normal;
  font-size: 28px;
}
.container {
  margin: 0;
  padding: 0;
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.01fr 10fr 10fr 10fr 10fr 10fr 10fr 10fr 10fr;
  grid-template-areas:
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main";
}
.content{
  height: 300px;
}
.content-1 {
  grid-area: content-1;
  background-color: red;
  height: 100px;
}
.content-2 {
  grid-area: content-2;
  background-color: aqua;
}
.content-3 {
  grid-area: content-3;
  background-color: palevioletred;
}
.content-4 {
  grid-area: content-4;
  background-color: aquamarine;
}
.content-5 {
  grid-area: content-5;
  background-color:peachpuff
}
.content-6 {
  grid-area: content-6;
  background-color:peru
}
.content-7 {
  grid-area: content-7;
  background-color:plum
}
.content-8 {
  grid-area: content-8;
  background-color:powderblue
}
.content-9 {
  grid-area: content-9;
  background-color:purple
}
.main {
  line-height: 1.8rem;
  margin: 0;
  padding: 0;
  margin-right: 5rem;
  margin-left: 4.85rem;
  background-color: white;
  grid-area: main;
}
.sidebar {
  padding: 0;
  background-color: #015360;
  grid-area: sidebar;
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  background-color: #015360;
}
.Name {
  grid-area: logo;
  margin-top: 20.5%;
  margin-left: 8.8%;
  margin-bottom: 0;
  padding-bottom: 2rem;
  color: white;
  font-weight: bold;
}
.Uplist {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 1.9rem;
  display: block;
}
.list {
  color: white;
  padding: 0.6rem;
  font-size: 14px;
  display: block;
}
.barber {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding-top: 0.25rem;
  padding-bottom: 0.3rem;
  margin-top: 1.88rem;
  text-align: center;
}
.color ul {
  list-style: square;
  padding: 0;
  padding-left: 1.15rem;
  margin: 0;
}
.color {
  color: #777;
}
p {
  padding: 0;
  margin: 0;
}
.title {
  font-weight: 400;
  font-size: 24px;
  display: block;
  margin: 0;
  margin-bottom: 17px;
  color: black;
}
.wel-come {
  margin-top: 2.1rem;
}
.features {
  margin-top: 40px;
  line-height: 33px;
}
.features h2 {
  margin-bottom: 5px;
}
.second {
  margin-top: 23px;
}
.instal {
  margin-top: 2.5rem;
  margin-bottom: 0;
  line-height: 40px;
}
.instal ol {
  margin: 0;
  padding: 0;
  padding-left: 2.5rem;
}
.tmpl-structure{
  width: 100%;
  height: 430px;
}
.mark{
  background-color: #fff;
  color: #000;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="start.css" />
  <title>Document</title>
  <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap" rel="stylesheet" />
</head>

<body>
  <div class="container">
    <main class="main">
    <section class="Welcome section section-1">
      <div class="barber">
        <h1>Barber</h1>
      </div>
      <div class="wel-come">
        <h2 class="title">Welcome To Barber</h2>
        <div class="color">
          <p>
            Firstly, a huge thanks for purchasing this theme, your support
            is truly appreciated!
          </p>
          <p>
            This document covers the installation and use of this theme and
            often reveals answers to common problems and issues - read this
            documentthoroughly if you are experiencing any difficulties. If
            you have any questions that are beyond the scope of this
            document. Thank you so much!
          </p>

          <p></p>
        </div>
      </div>
      <div class="features">
        <h2 class="title">Template Features</h2>
        <div class="color">
          <ul>
            <li>Clean & Simple Design</li>
            <li>HTML5 & CSS3</li>
            <li>Fully Responsive Design</li>
            <li>PHP/Ajax Powered Working Contact Form</li>
            <li>All files are well commented</li>
            <li>
              Cross Browser Compatible with IE11+, Firefox, Safari, Opera,
              Chrome
            </li>
            <li>Extensive Documentation</li>
          </ul>
        </div>
      </div>
    </section>
    <section class="Installing section section-2" style="height:1500px;">
      <div class="barber second">
        <h1>Barber</h1>
      </div>
      <div class="color instal">
        <h2 class="title">Installing Template</h2>
        <ol>
          <li>
            After unzip the download pack, you'll found a Template Folder
            with all the files.
          </li>
          <li>
            You can view this Template in any browser, you can display or
            edit the Template without an internet connection.(May not wotrk
            fonts and google map)
          </li>
          <li>
            The only section that will not work is the Contact Section which
            contains PHP code and requires a server environment for send
            messages.
          </li>
          <li>
            Now go to your cpanel or open your FTP Client (like Filezilla)
            and upload the content of the Template on your server root.
          </li>
          <li>
            Once the files are done uploading go to
            www.yourdomainname.com/index.html
          </li>
        </ol>
      </div>
    </section>
    <section class="tmpl-structure section section-3">
      <h2 class="title">Template Structure</h2>
      <p class="fifteen">
        All information within the main content area is nested within a body
        tag. The general template structure is pretty the same throughout
        the template. Here is the general structure of main page
        (index.html).
      </p>
      <div class="bos"></div>
    </section>
    <section class="css-structure section section-4" style="height: 600px">
      <h2 class="title">CSS Files and Structure</h2>
      <p class="fifteen">
        These are the css files that are loaded into templates in
        <strong>Head Section</strong>.
      </p>
      <h2 class="title">Google Web Fonts</h2>
      <p>
        By default, the template loads this font from Google Web Font
        Services, you can change the font with the one that suits you best.
      </p>
      <p class="twenty">
        Remember to change the font into <strong>style.css</strong>
      </p>
    </section>
    <section class="javascript section section-5" style="height: 600px">
      <h2 class="title">Javascript Files and Structure</h2>
      <p class="fifteen">
        These are the list of Javascript files that are loaded into
        templates in end of the <strong>Body Section</strong>.
      </p>
    </section>
    <section class="contact-form section section-6" style="height: 600px">
      <h2 class="title">Contact Form</h2>
      <p>
        This is a PHP Script for sending messages to your email, you should
        replace <strong>demo@site.com</strong> to your email to start
        receive messages.
      </p>
      <pre class="brush:php">
              $to = 'demo@site.com'; // replace this mail with yours
              $firstname = $_POST["fname"];
              $email= $_POST["email"];
              $headers = 'MIME-Version: 1.0' . "\r\n";
              $headers .= "From: " . $email . "\r\n"; // Sender's E-mail
              $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
      
              $message ='<table style="width:100%">
                <tr>
                  <td>'.$firstname.'  '.$laststname.'</td>
                </tr>
                <tr><td>Email: '.$email.'</td></tr>
              </table>';
      
              if (@mail($to, $email, $message, $headers))
              {
                echo 'The message has been sent.';
              }else{
              echo 'failed';
            }
          </pre>
    </section>
    <section class="subscription-form section section-7" style="height: 600px">
      <h2 class="title">Subscription Form</h2>
      <p>
        Replace this action with your own mailchimp post URL. Don't remove
        the "". Just paste the url inside "".
      </p>
    </section>
    <section class="video section-8" style="height: 600px">
      <h2 class="title">Video Tutorial</h2>
    </section>
  </main> 
    <div class="sidebar">
      <h1 class="Name">BARBER</h1>
      <ul class="Uplist">
        <li class="list list-1">Welcome</li>
        <li class="list list-2">Installation</li>
        <li class="list list-3">Structure</li>
        <li class="list list-4">CSS Files</li>
        <li class="list list-5">Javascript Libraries</li>
        <li class="list list-6">Contact Form</li>
        <li class="list list-7">Subscription form</li>
        <li class="list list-8">Video Tutorial</li>
      </ul>
    </div>

  </div>
 

  </div>
  </div>
</body>

</html>

<script defer src="start.js"></script>

​

Answer 1

这更接近你想要的吗，https://jsfiddle.net/uawrtvpL/

​

const images = document.querySelectorAll('.section');

function handleIntersection(entries) {
  entries.map((entry, i) => {
    if (entry.isIntersecting) {
      let index = entry.target.elems_index;
      document.querySelectorAll(".list").forEach((el) => {
        el.classList.remove("mark")
      })
      document.querySelector(".list-" + index.toString()).classList.add("mark");
    }
  });
}

const observer = new IntersectionObserver(handleIntersection);

images.forEach((elem, index) => {
  // save index as element’s property before register the element in observer
  elem.elems_index = index + 1;
  observer.observe(elem);
});

* {
  font-weight: 300;
}

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 100;
  background-color: #fff;
  font-family: "Lato", sans-serif;
}
h1 {
  font-weight: normal;
  font-size: 28px;
}
.container {
  margin: 0;
  padding: 0;
  display: grid;
  height: 100%;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.01fr 10fr 10fr 10fr 10fr 10fr 10fr 10fr 10fr;
  grid-template-areas:
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main"
    "sidebar main main main main main";
}
.content{
  height: 300px;
}
.content-1 {
  grid-area: content-1;
  background-color: red;
  height: 100px;
}
.content-2 {
  grid-area: content-2;
  background-color: aqua;
}
.content-3 {
  grid-area: content-3;
  background-color: palevioletred;
}
.content-4 {
  grid-area: content-4;
  background-color: aquamarine;
}
.content-5 {
  grid-area: content-5;
  background-color:peachpuff
}
.content-6 {
  grid-area: content-6;
  background-color:peru
}
.content-7 {
  grid-area: content-7;
  background-color:plum
}
.content-8 {
  grid-area: content-8;
  background-color:powderblue
}
.content-9 {
  grid-area: content-9;
  background-color:purple
}
.main {
  line-height: 1.8rem;
  margin: 0;
  padding: 0;
  margin-right: 5rem;
  margin-left: 4.85rem;
  background-color: white;
  grid-area: main;
}
.sidebar {
  padding: 0;
  background-color: #015360;
  grid-area: sidebar;
  position: sticky;
  top: 0;
  height: 100vh;
}

.logo {
  background-color: #015360;
}
.Name {
  grid-area: logo;
  margin-top: 20.5%;
  margin-left: 8.8%;
  margin-bottom: 0;
  padding-bottom: 2rem;
  color: white;
  font-weight: bold;
}
.Uplist {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-left: 1.9rem;
  display: block;
}
.list {
  color: white;
  padding: 0.6rem;
  font-size: 14px;
  display: block;
}
.barber {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding-top: 0.25rem;
  padding-bottom: 0.3rem;
  margin-top: 1.88rem;
  text-align: center;
}
.color ul {
  list-style: square;
  padding: 0;
  padding-left: 1.15rem;
  margin: 0;
}
.color {
  color: #777;
}
p {
  padding: 0;
  margin: 0;
}
.title {
  font-weight: 400;
  font-size: 24px;
  display: block;
  margin: 0;
  margin-bottom: 17px;
  color: black;
}
.wel-come {
  margin-top: 2.1rem;
}
.features {
  margin-top: 40px;
  line-height: 33px;
}
.features h2 {
  margin-bottom: 5px;
}
.second {
  margin-top: 23px;
}
.instal {
  margin-top: 2.5rem;
  margin-bottom: 0;
  line-height: 40px;
}
.instal ol {
  margin: 0;
  padding: 0;
  padding-left: 2.5rem;
}
.tmpl-structure{
  width: 100%;
  height: 430px;
}
.mark{
  background-color: #fff;
  color: #000;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="start.css" />
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700&display=swap" rel="stylesheet" />
  </head>

  <body>
    <div class="container">
      <main class="main">
        <section class="Welcome section section-1">
          <div class="barber">
            <h1>Barber</h1>
          </div>
          <div class="wel-come">
            <h2 class="title">Welcome To Barber</h2>
            <div class="color">
              <p>
                Firstly, a huge thanks for purchasing this theme, your support
                is truly appreciated!
              </p>
              <p>
                This document covers the installation and use of this theme and
                often reveals answers to common problems and issues - read this
                documentthoroughly if you are experiencing any difficulties. If
                you have any questions that are beyond the scope of this
                document. Thank you so much!
              </p>

              <p></p>
            </div>
          </div>
          <div class="features">
            <h2 class="title">Template Features</h2>
            <div class="color">
              <ul>
                <li>Clean & Simple Design</li>
                <li>HTML5 & CSS3</li>
                <li>Fully Responsive Design</li>
                <li>PHP/Ajax Powered Working Contact Form</li>
                <li>All files are well commented</li>
                <li>
                  Cross Browser Compatible with IE11+, Firefox, Safari, Opera,
                  Chrome
                </li>
                <li>Extensive Documentation</li>
              </ul>
            </div>
          </div>
        </section>
        <section class="Installing section section-2" style="height:1500px;">
          <div class="barber second">
            <h1>Barber</h1>
          </div>
          <div class="color instal">
            <h2 class="title">Installing Template</h2>
            <ol>
              <li>
                After unzip the download pack, you'll found a Template Folder
                with all the files.
              </li>
              <li>
                You can view this Template in any browser, you can display or
                edit the Template without an internet connection.(May not wotrk
                fonts and google map)
              </li>
              <li>
                The only section that will not work is the Contact Section which
                contains PHP code and requires a server environment for send
                messages.
              </li>
              <li>
                Now go to your cpanel or open your FTP Client (like Filezilla)
                and upload the content of the Template on your server root.
              </li>
              <li>
                Once the files are done uploading go to
                www.yourdomainname.com/index.html
              </li>
            </ol>
          </div>
        </section>
        <section class="tmpl-structure section section-3">
          <h2 class="title">Template Structure</h2>
          <p class="fifteen">
            All information within the main content area is nested within a body
            tag. The general template structure is pretty the same throughout
            the template. Here is the general structure of main page
            (index.html).
          </p>
          <div class="bos"></div>
        </section>
        <section class="css-structure section section-4" style="height: 600px">
          <h2 class="title">CSS Files and Structure</h2>
          <p class="fifteen">
            These are the css files that are loaded into templates in
            <strong>Head Section</strong>.
          </p>
          <h2 class="title">Google Web Fonts</h2>
          <p>
            By default, the template loads this font from Google Web Font
            Services, you can change the font with the one that suits you best.
          </p>
          <p class="twenty">
            Remember to change the font into <strong>style.css</strong>
          </p>
        </section>
        <section class="javascript section section-5" style="height: 600px">
          <h2 class="title">Javascript Files and Structure</h2>
          <p class="fifteen">
            These are the list of Javascript files that are loaded into
            templates in end of the <strong>Body Section</strong>.
          </p>
        </section>
        <section class="contact-form section section-6" style="height: 900px">
          <h2 class="title">Contact Form</h2>
          <p>
            This is a PHP Script for sending messages to your email, you should
            replace <strong>demo@site.com</strong> to your email to start
            receive messages.
          </p>
          <pre class="brush:php">
              $to = 'demo@site.com'; // replace this mail with yours
              $firstname = $_POST["fname"];
              $email= $_POST["email"];
              $headers = 'MIME-Version: 1.0' . "\r\n";
              $headers .= "From: " . $email . "\r\n"; // Sender's E-mail
              $headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
      
              $message ='<table style="width:100%">
                <tr>
                  <td>'.$firstname.'  '.$laststname.'</td>
                </tr>
                <tr><td>Email: '.$email.'</td></tr>
              </table>';
      
              if (@mail($to, $email, $message, $headers))
              {
                echo 'The message has been sent.';
              }else{
              echo 'failed';
            }
          </pre>
        </section>
        <section class="subscription-form section section-7" style="height: 600px">
          <h2 class="title">Subscription Form</h2>
          <p>
            Replace this action with your own mailchimp post URL. Don't remove
            the "". Just paste the url inside "".
          </p>
        </section>
        <section class="video section section-8" style="height: 600px">
          <h2 class="title">Video Tutorial</h2>
        </section>
      </main>
      <div class="sidebar">
        <h1 class="Name">BARBER</h1>
        <ul class="Uplist">
          <li class="list list-1">Welcome</li>
          <li class="list list-2">Installation</li>
          <li class="list list-3">Structure</li>
          <li class="list list-4">CSS Files</li>
          <li class="list list-5">Javascript Libraries</li>
          <li class="list list-6">Contact Form</li>
          <li class="list list-7">Subscription form</li>
          <li class="list list-8">Video Tutorial</li>
        </ul>
      </div>
    </div>
  </body>
</html>
<script defer src="start.js"></script>

​

我希望这能帮到你