Html - Change style of fixed buttons when scrolling a page

Hithere
July 19, 2023
245 views
0 votes
2 Answers

When i click any of the fixed buttons on the left pane (also fixed) the page scrolls to a certain section (each button corresponds to a section).How can I achieve the contrary:whenever I scroll to a section the corresponding button is highlighted?
Here is code:
HTML:

`<aside class="sidebar"><p id="sidebar-navigation-title" class="sidebar-section-title">Welcome</p><br>
 <div id="sidebar-navigation-buttons" class="sidebar-navigation-buttons">
  <button id="sidebar-navigation-to-contact" class="sidebar-section-button" 
   onclick="ScrollToContact()">Contact</button>
  <button id="sidebar-navigation-to-projects" class="sidebar-section-button" 
   onclick="ScrollToProjects()">Projects</button>
  <button id="sidebar-navigation-to-top" style="font-weight:bolder;" 
   class="sidebar-section-button-selected" onclick="ScrollToTop()">About</button>
</div><br></aside>
<div id="about-content-container">
</div>
<div id="project-content-container">
</div>
<div id="contact-content-container">
</div>`

CSS:

.sidebar
{
 width:140px;
 height:100%;
 font-family:Rajdhani;
 background-image: url("./sidebar_background.jpg");
 color:white;
 float:left;
 position:fixed;
 display: block;
}
#about-content-container
{
 height:100%;
 width:100%;
 padding:1px;
 background-color:#FCB9B5;
}
#projects-content-container
{
 height:100%;
 width:100%;
 padding:1px;
 background-color:#B5EECB;
}
#contact-content-container
{
 height:100%;
 width:100%;
 padding:1px;
 background-color:#1F3541;
}
/*sidebar text on top left*/
.sidebar-section-title
{
 color:#A1DBF1;
 font-size:25px;
 left:25px;
 position:absolute;
 font-weight: bold;
}
/*-----------------------*/
/*sidebar 3 buttons container*/
.sidebar-navigation-buttons
{
 height:100px;
 width:100px;
 position:absolute;
 top:33.3%;
 left:10px;
 margin-left:12px;
 rotate:90deg;
}
/*-----------------------*/
/*sidebar generic button*/
.sidebar-section-button
{
 color:whitesmoke;
 background:none;
 border:none;
 font-family:Rajdhani;
 font-size:22.5px;
 width:100px;
 height:33px;
 margin-bottom:3px;
 display: inline-block;
 transition: 0.3s;
}
.sidebar-section-button:hover
{
 background-color: rgba(225, 239, 250, 0.6);
 color:white;
 font-weight: 200;
}
/*-----------------------*/
/*sidebar button corresponding to the section scrolled to*/
.sidebar-section-button-selected
{
 color:whitesmoke;
 background:none;
 border:1px solid transparent;
 font-family:Rajdhani;
 font-size:22.5px;
 width:100px;
 height:33px;
 margin-bottom:3px;
 display: inline-block;
 transition: 0.3s;
}
.sidebar-section-button-selected:hover
{
 border:1px solid rgba(225, 239, 250, 0.6);
 color:white;
 margin-bottom:2.5px;
}

I’ve tried with scrollTop and IntersectionObserver but nothing works.From what I’ve tried it seems like window scroll event is not even happening.

Answers

You can use getBoundingClientRect() method and then calculate the distance from the top.

P.S: I added 2 second time out so you can see that the .highlighted is being added only when the link is on the screen

const myAnchor = document.getElementById('myLink')

function isElementOutOfView(element) {
  const rect = element.getBoundingClientRect();
   return (
    rect.bottom < 0 || rect.top > window.innerHeight
  );
}

function handleScroll() {
   if (isElementOutOfView(myAnchor)) {
         myAnchor.classList.remove('highlighted');
  } else {
    setTimeout(() => {
         myAnchor.classList.add('highlighted');
    },2000)

  }
}

window.addEventListener('scroll', handleScroll);

div{
  height:100vh;
  background:orange;
}

.highlighted {
  background-color: red;
  color:green;
}

<div></div>
<a href="#section1" id="myLink">Scroll to Section 1</a>
<section id="section1">
  some text
  some text
  some text
  some text
  some text
</section>
<div></div>

I have written all the necessary codes for those functionalities with proper comments. If you want to change the style of the link on scroll just write it in the active class and it will be applied. Feel free to ask questions.

// On scroll menu link activation
$(window).scroll(function() {
    var scrollDistance = $(window).scrollTop();

    // Assign active class to links while scolling
    $('.page-section').each(function(i) {
        if (($(this).position().top - 10) <= scrollDistance) {
            $('#sidebar-navigation-buttons a.active').removeClass('active');
            $('#sidebar-navigation-buttons a').eq(i).addClass('active');
        }
    });
}).scroll();

.sidebar
{
width:140px;
height:100%;
font-family:Rajdhani;
background-image: url("https://picsum.photos/1400/1400?random=1");
color:white;
float:left;
position:fixed;
display: block;
}
#about-content-container
{
height:100%;
width:100%;
padding:1px;
background-color:#FCB9B5;
}
#projects-content-container
{
height:100%;
width:100%;
padding:1px;
background-color:#B5EECB;
}
#contact-content-container
{
height:100%;
width:100%;
padding:1px;
background-color:#1F3541;
}
/*sidebar text on top left*/
.sidebar-section-title
{
color:#A1DBF1;
font-size:25px;
left:25px;
position:absolute;
font-weight: bold;
}
/*-----------------------*/
/*sidebar 3 buttons container*/
.sidebar-navigation-buttons
{
height:100px;
width:100px;
position:absolute;
top:33.3%;
left:10px;
margin-left:12px;
rotate:90deg;
}
/*-----------------------*/
/*sidebar generic button*/
.sidebar-section-button
{
color:whitesmoke;
background:none;
border:none;
font-family:Rajdhani;
font-size:22.5px;
width:100px;
height:33px;
margin-bottom:3px;
display: inline-block;
transition: 0.3s;
}
.sidebar-section-button:hover
{
background-color: rgba(225, 239, 250, 0.6);
color:white;
font-weight: 200;
}
/*-----------------------*/
/*sidebar button corresponding to the section scrolled to*/
.sidebar-section-button-selected
{
color:whitesmoke;
background:none;
border:1px solid transparent;
font-family:Rajdhani;
font-size:22.5px;
width:100px;
height:33px;
margin-bottom:3px;
display: inline-block;
transition: 0.3s;
}
.sidebar-section-button-selected:hover
{
border:1px solid rgba(225, 239, 250, 0.6);
color:white;
margin-bottom:2.5px;
}

#about-content-container, #project-content-container, #contact-content-container{
  min-height: 100vh;
}

#about-content-container{
  background: rgb(187, 187, 187);
}

#project-content-container{
  background: rgb(172, 187, 253)
}

#contact-content-container{
  background: rgb(168, 253, 242)
}

/* put the style in the active class that you want to see in your links when scroll */
.active{
  border: 1px solid rgba(1, 255, 35, 0.61);
}

<aside class="sidebar"><p id="sidebar-navigation-title" class="sidebar-section-title">Welcome</p><br>
    <div id="sidebar-navigation-buttons" class="sidebar-navigation-buttons">
      <!-- buttons are wrapped with anchor tags for onclick section scroll -->
     <a href="#contact-content-container"><button id="sidebar-navigation-to-contact" class="sidebar-section-button"
      onclick="ScrollToContact()">Contact</button></a>
     <a href="#project-content-container"><button id="sidebar-navigation-to-projects" class="sidebar-section-button" 
      onclick="ScrollToProjects()">Projects</button></a>
     <a href="#about-content-container"><button id="sidebar-navigation-to-top" style="font-weight:bolder;" 
      class="sidebar-section-button-selected" onclick="ScrollToTop()">About</button></a>
   </div><br></aside>

   <!-- assign "page-section" class to all the sections -->
   
   <div id="contact-content-container" class="page-section" style="text-align: center;">
    contact
   </div>
   <div id="project-content-container" class="page-section" style="text-align: center;">
    project
   </div>

   <div id="about-content-container" class="page-section" style="text-align: center;">
    about
   </div>   
   
   
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Change style of fixed buttons when scrolling a page

Answers