javascript 单一导航页面

Question

hi guys ı have a few questions ı am working on single page website(for practicing). ı still didn't complete web site but ı have few problems.

• there is a nav on left side of page. when you are on a certain section of page, nav on left side glow according to that section.
• But FİRST problem is that sides should glow not working properly.
  • it's working kind of but have some bugs like when you scroll the page fast more than a few glow appear
  • (only one glow should appear in a moment).
• SECOND problem is some time I don't see section and there is no glowing part on nav.
  • ı have tried to lengthen those section it made problem appear less but didn't solve it.
• THİRD problem is efficiency of code, ı tried a few things but none of them worked so ı had to use too many 'if' and 'if else'.
  • it's looks so ugly

here is the code:

 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

Is this closer to what you want 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>

I hope this helps