Add changes to HTML sections using JavaScript condition

Question

I have a one section website that shows sections (about, services, …) when scrolling down (hiding the previous section). How can I use JavaScript code to add CSS changes when each section is shown (changes like: show/hide a certain logo, change color of active text of the section in main menu, changing color of navigation menu, …? What I mean : if this section is selected (using the menu or the nav bar) / scrolled to (mouse scrolling) , then do the CSS changes Any help?

Similar website: https://bratsun.com/#hello

score 0 · Answer 1 · answered Apr 14 '21 at 13:02

0

You could watch the elements if one is in viewport. This might help: How can I tell if a DOM element is visible in the current viewport?

If the element is in viewport then you add a class (e.g. "active") to the according nav item

answered Apr 14 '21 at 13:02

sbrand5020

66
5

Fábio Ribeiro de Carvalho · Answer 2 · 2021-04-16T07:58:45.800

0

A demo web view to scroll down and up folloing the header menu. The page is not reponsive but you can get it as example to set up a better one.

As you can see the function goToSectionPage is responsable to do the event to get the scroll to the wish section.

Also, you can optimize the repetition of function addEventHandlerToHeaderButton in the js code.

function goToSectionPage(sectionElement) {
  sectionElement.scrollIntoView({ behavior: "smooth", block: "center" });
}

function addEventHandlerToHeaderButton(buttonId, sectionId) {
  const buttonTarget = document.getElementById(buttonId);

  buttonTarget.addEventListener("click", function () {
    const parentSectionElement = document.querySelector("main");
    const targetSection = document.getElementById(sectionId);

    goToSectionPage(targetSection);
    addCssClassToSelecedtSession(parentSectionElement, targetSection, "selected");    
  });
}

function addCssClassToSelecedtSession(parentWrapSectionElements, selectedSectionElement, className) {
  for(let section of parentWrapSectionElements.children){
    section.classList.remove(className)
  }
  selectedSectionElement.classList.add(className)
}

addEventHandlerToHeaderButton("headerSection1", "section1");
addEventHandlerToHeaderButton("headerSection2", "section2");
addEventHandlerToHeaderButton("headerSection3", "section3");
addEventHandlerToHeaderButton("headerSection4", "section4");
addEventHandlerToHeaderButton("headerSection5", "section5");
addEventHandlerToHeaderButton("headerSection6", "section6");
addEventHandlerToHeaderButton("headerSection7", "section7");
addEventHandlerToHeaderButton("headerAbout", "about");

.section {
    display: block;
    height: 50px;
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 5px;
}

.header-item {
    cursor: pointer;
    padding: 0 8px;
    font-family: system-ui;
    font-size: 10px;
    color: #00000080;
}

.header-item:hover {
    border-bottom: 1px solid black;
}

header {
    width: 100%;
    position: fixed;
}

main {
    padding-top: 45px;
}

.selected {
    animation: sectionSelected 2s forwards;
}

@keyframes sectionSelected {
    from {
        background-color: #fff;
    }
    to {
        background-color: #c4c4c4;
    }
}

<!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" />
    <title>Test</title>
    <link rel="stylesheet" href="./stackoverflow.css">
  </head>

  <body>
    <header>
      <span id="headerSection1" class="header-item">Go to Section 1</span>
      <span id="headerSection2" class="header-item">Go to Section 2</span>
      <span id="headerSection3" class="header-item">Go to Section 3</span>
      <span id="headerSection4" class="header-item">Go to Section 4</span>
      <span id="headerSection5" class="header-item">Go to Section 5</span>
      <span id="headerSection6" class="header-item">Go to Section 6</span>
      <span id="headerSection7" class="header-item">Go to Section 7</span>
      <span id="headerAbout" class="header-item">Go to About</span>
    </header>

    <main>
      <section id="section1" class="section">Section1</section>
      <section id="section2" class="section">Section2</section>
      <section id="section3" class="section">Section3</section>
      <section id="section4" class="section">Section4</section>
      <section id="section5" class="section">Section5</section>
      <section id="section6" class="section">Section6</section>
      <section id="section7" class="section">Section7</section>
      <section id="about" class="section">About</section>
    </main>
  </body>
  <script src="./stackoverflow.js"></script>
</html>

https://github.com/stembrino/simple-page-example-scroll-down-up

edited Apr 16 '21 at 07:58

answered Apr 14 '21 at 14:19

Fábio Ribeiro de Carvalho

125
1
9

Great thank you, it's about scrolling, my website is finished and working good from scrolling part, but still have the style problem. I want to do CSS changes when a certain section is Selected (using menu) or Scrolled to, like changing the logo, coloring the active text in the menu, ... – FadiKh Apr 14 '21 at 15:24
Ok @FadiKh I changed the code in order to apply some style in the section. We can do that with js. But be aware that the more we apply code the more we must organize. In this case it's just an example, but can be applyed in some separeted part of a project. – Fábio Ribeiro de Carvalho Apr 14 '21 at 16:13
1

I uploaded a test you can check here to zip file github.com/MDwaihi/Test.git What I wanted is done when you click to navigate, switching sections using the menu bar or the scrolling icon, the problem still when switching using scrolling, you can see if you check – FadiKh Apr 16 '21 at 10:18
I'll create the project in github without zip and add you. So we can apply changes to this project together – Fábio Ribeiro de Carvalho Apr 16 '21 at 10:41
https://github.com/stembrino/Vertex – Fábio Ribeiro de Carvalho Apr 16 '21 at 10:59
I'm scrolling down and the web site is changing. I didn't understand what you'd like to do – Fábio Ribeiro de Carvalho Apr 16 '21 at 11:03
Hey, sorry that it's not clear for you. If you click "services" from the menu, you go to this section, and you can see the logo and the colors in the menu was changed, this works with me, the problem is while scrolling down with the mouse and not by clicking, still don't know how to do that, also by scrolling I want to change the styles. – FadiKh Apr 16 '21 at 14:38
OK I see that the logo was no changed when scroll but works clicking. I update the git project to change the colors. I create a custom libreary to slider to include two function and keep the original file if needed. Please see all commits to realize what was done: https://github.com/stembrino/Vertex And if you don't mind could u put the arrow up to increase my reputation here in stack – Fábio Ribeiro de Carvalho Apr 16 '21 at 16:08
You can verify here: https://stembrino.github.io/Vertex/ – Fábio Ribeiro de Carvalho Apr 16 '21 at 16:38
Great. It works for the logo. But is there a way to change the colors of the text in the menu bar? Example: if it's home (about) page, "about" should be orange and "services" should be black; it it's "services" page, "services" should be orange and "about" should be white. And please, last question, if two sections were added, what should I do? cause the changes are only for firstSlide and lastSlide – FadiKh Apr 16 '21 at 16:52
I want to add two sections after services, the third has the same style we already added as the "about", and the fourth has the same as "services" – FadiKh Apr 16 '21 at 16:57
In other way, we can now copy/paste the two existing sections. – FadiKh Apr 16 '21 at 17:14
Hello I fixed the section bar. You can see the last version: https://stembrino.github.io/Vertex/ – Fábio Ribeiro de Carvalho Apr 16 '21 at 22:03
I can't do more because I have to study the framework that you are using and I worked a lot in this project already and I'm working in a companny as well. I can try it in the future. You can read the code that was changed in the gitHub. – Fábio Ribeiro de Carvalho Apr 16 '21 at 22:06
As I said, please just click in "answer is useful", to do so, click in the UP ARROW in my answer of your question to help me increase profile in stackoverflow. I think it's fair! But if you not want it....ok man, go on..... – Fábio Ribeiro de Carvalho Apr 16 '21 at 22:09
Okay. I did this in your answer. – FadiKh Apr 17 '21 at 03:10
1

Hello again Fabio, please last thing, you can check the solution in GitHub updated by me, I made some changes and fixed everything I wanted. Still one problem (switching colors) in the left navigation menu, please if you can check it. Last issue. – FadiKh Apr 20 '21 at 10:52
Yes, for sure. In github we can continue with the process to increse your solututions...I'll comment your commits – Fábio Ribeiro de Carvalho Apr 20 '21 at 11:14
Yes please, it's finished still this issue. Thank you for your help! – FadiKh Apr 20 '21 at 11:15

score 0 · Answer 3 · answered Apr 14 '21 at 18:10

0

You are looking for the IntersectionObserver API.

Here's an educational youtube video on IntersectionObserver V1.

For some corner cases IntersectionObserver V2 has been specified and implemented in Chrome.

answered Apr 14 '21 at 18:10

connexo

41,035
12
60
87

Add changes to HTML sections using JavaScript condition

3 Answers3