Change the color of the text based on which classes the visitor is currently viewing on the page

Question

Change the color of the text based on which classes the visitor is currently viewing on the page

I have a sidebar menu in plain html for page navigation, like this:

<div class="sidebar"><h2>About us</h2>

<h3><a href="#chapter1" class="link">Chapter 1</a></h3>
<h3><a href="#chapter2" class="link">Chapter 2</a></h3>
<h3><a href="#chapter3" class="link">Chapter 3</a></h3>
</div>

Currently, when a visitor clicks on Chapter 1, they are taken to the Chapter 1 section and the Chapter 1 link in the sidebar changes color temporarily due to a:active delay.

However, I am trying to find a way to have the link in the sidebar change color when the visitor is on the specific section. For example, when they scroll down to Chapter 2, the Chapter 1 link color should revert to normal and the Chapter 2 link color should change.

Any suggestions or solutions would be greatly appreciated!

Update: I am working with a Wordpress website, and the suggestions provided so far have not worked as the sidebar is a Wordpress sidebar with a fixed position.

javascript jquery html css

Answer 1

Answer №1

Enhance your website with active and inactive styles

.active { color=red; }
.inactive { color=black; }

To activate chapters, include onMouseOver="setActive(1)", onMouseOver="setActive(2)", and so on...

Create a JavaScript function to adjust colors in the sidebar.

function setActive(ch)
{
   document.getElementById("#chapter1").className="link "+(ch==1?"active":"inactive");
   document.getElementById("#chapter2").className="link "+(ch==2?"active":"inactive");
   document.getElementById("#chapter3").className="link "+(ch==3?"active":"inactive");
}

Make sure to call setActive(xx) when clicking on any sidebar element.

Answer 2

Enhance your website with active and inactive styles

.active { color=red; }
.inactive { color=black; }

To activate chapters, include onMouseOver="setActive(1)", onMouseOver="setActive(2)", and so on...

Create a JavaScript function to adjust colors in the sidebar.

function setActive(ch)
{
   document.getElementById("#chapter1").className="link "+(ch==1?"active":"inactive");
   document.getElementById("#chapter2").className="link "+(ch==2?"active":"inactive");
   document.getElementById("#chapter3").className="link "+(ch==3?"active":"inactive");
}

Make sure to call setActive(xx) when clicking on any sidebar element.

Answer 3

Answer №2

Scrollspy is the solution you're looking for.

Check out these links:

Answer 4

Scrollspy is the solution you're looking for.

Check out these links:

Answer 5

Answer №3

Utilize Bootstrap's built-in breadcrumbs for easy navigation,

or check out this interactive example using jQuery: http://jsfiddle.net/8S2eu/2/

Here's the key script for implementation:

Organize the page structure as follows:

<div class="sidebar"><h2>About us</h2>

<h3><a href="#chapter1" class="link active" id="chapter1">Chapter 1</a></h3>
<h3><a href="#chapter2" class="link" id="chapter2">Chapter 2</a></h3>
<h3><a href="#chapter3"  class="link" id="chapter3">Chapter 3</a></h3>
</div>
<div class='main'>
    <section id="chapter1">
        <a id="chapter1"></a>
    </section>
    <section id="chapter2">
        <a id="chapter2"></a>
    </section>
    <section id="chapter3">
        <a id="chapter3"></a>
    </section>
</div>

Include the necessary JS code to enable the functionality:

$(".main").on("scroll",function(e){
    var fifty_percent_y = $(".main").height() * 0.5;
    var scroll_position = $(this).scrollTop();
    var prev_scroll_position = $(this).data('scroll_position');
    var delta = scroll_position - prev_scroll_position;
    $(this).data('scroll_position', scroll_position);


    //the rule is: if the top of chapter section tag crosses up across 50% then it becomes active, or if the bottom of a section tag crosses down across 50% then it becomes active.
    $('section').each(function(i, el){
        $this = $(this);
        var top_y = $this.position().top;
        var bottom_y = top_y + $this.height();
        if ((top_y     < fifty_percent_y && top_y    + delta > fifty_percent_y) ||
            (bottom_y  > fifty_percent_y && bottom_y + delta < fifty_percent_y)
           ){
            $("a").removeClass('active');
            $("a#" + $this[0].id).addClass('active');
            return false;
        }
    });
});

Answer 6

Utilize Bootstrap's built-in breadcrumbs for easy navigation,

or check out this interactive example using jQuery: http://jsfiddle.net/8S2eu/2/

Here's the key script for implementation:

Organize the page structure as follows:

<div class="sidebar"><h2>About us</h2>

<h3><a href="#chapter1" class="link active" id="chapter1">Chapter 1</a></h3>
<h3><a href="#chapter2" class="link" id="chapter2">Chapter 2</a></h3>
<h3><a href="#chapter3"  class="link" id="chapter3">Chapter 3</a></h3>
</div>
<div class='main'>
    <section id="chapter1">
        <a id="chapter1"></a>
    </section>
    <section id="chapter2">
        <a id="chapter2"></a>
    </section>
    <section id="chapter3">
        <a id="chapter3"></a>
    </section>
</div>

Include the necessary JS code to enable the functionality:

$(".main").on("scroll",function(e){
    var fifty_percent_y = $(".main").height() * 0.5;
    var scroll_position = $(this).scrollTop();
    var prev_scroll_position = $(this).data('scroll_position');
    var delta = scroll_position - prev_scroll_position;
    $(this).data('scroll_position', scroll_position);


    //the rule is: if the top of chapter section tag crosses up across 50% then it becomes active, or if the bottom of a section tag crosses down across 50% then it becomes active.
    $('section').each(function(i, el){
        $this = $(this);
        var top_y = $this.position().top;
        var bottom_y = top_y + $this.height();
        if ((top_y     < fifty_percent_y && top_y    + delta > fifty_percent_y) ||
            (bottom_y  > fifty_percent_y && bottom_y + delta < fifty_percent_y)
           ){
            $("a").removeClass('active');
            $("a#" + $this[0].id).addClass('active');
            return false;
        }
    });
});

Change the color of the text based on which classes the visitor is currently viewing on the page

Answer №1

Answer №2

Answer №3

Organize the page structure as follows:

Include the necessary JS code to enable the functionality:

Similar questions

Chrome is experiencing compatibility issues with Datatable

Optimizing the Placement of Dynamic Google Maps

Difficulties encountered when attempting to use a background image for shadow effects within a CSS design

Utilizing single-use bindings for a unique element directive

Determine if a specific route path exists within the URL in Angular

Repetition of UTM Parameters

The functionality of Express' render/redirect is limited to being triggered only by a submit method within a form

CSS switch status toggle

Error: Element table in VueJS contains a duplicate key

Introducing React JSX via a nifty bookmarklet

Is your Jquery validation malfunctioning?

Is it possible to interact with Java SE jars using JavaScript?

Having trouble linking the component to the Redux store

Striving to make edits that will reflect changes in the database, however, I continue to encounter error CS0123 stating that there is no matching overload for 'Insert_Click' with the delegate 'EventHandler'

Ensuring Proper Tabulator Width Adjustment Across All Browser Zoom Levels

Separate Your Navbar with Bootstrap 4 Separators

How do I effectively replace content with a banner or alert message for users experiencing issues with the website on Internet Explorer?

Android Chrome users experiencing sidebar disappearance after first toggle

Customizing App (directory) elements in next.js 13

Next.js page transitions causing Google Tag Manager to malfunction with 'react-gtm-module'