CODEWITHSUNDEEP
javascripthtmlcss
Neil Graham
Neil Graham

Reputation: 863

How can I change CSS styles as a user reaches a specific point on a page?

I am trying to underline each specific title inside of a fixed navigation bar as a person reaches specific points on a page.

Ex: As a person reaches the Contact Info section of the page, the title "CONTACT INFO" inside of the fixed navigation bar will be the only title with a red underline.

Upvotes: 0

Views: 172

Answers (2)

Rizki Pratama
Rizki Pratama

Reputation: 571

The easiest way for me is to use jQuery.

$(window).on('scroll', function () {
    if ($(window).scrollTop() > SPECIFIC_POINT_ON_A_PAGE) {
        // if you want to add CSS class to the element:
        $('element-selector-here').addClass('display-block'); 
        // Or, if you want to add CSS code directly:
        // $('element-selector-here').css('display', 'block'); 
    } else {
        // It's on you whether you want to remove the CSS if you scroll the page
        // to before the specific point you set
        $('element-selector-here').removeClass('display-block');
    }
});

Where SPECIFIC_POINT_ON_A_PAGE could be the Y position of a specific element, e.g. $('element-selector-that-triggers-the-css').offset().top


Edit:

If you want to achieve what you want as you stated on your example, Marcus Lind's answer is the most simple that you can use.

I used Scrollspy too on my personal web page. Here is the way I use it:

// Highlight the top nav as scrolling occurs
$('body').scrollspy({
    target: '#navbar',
    offset: ($('#navbar').outerHeight()) // you may want to use offset
});

And the HTML is like this; You must match the nav item href and the ID of the element:

<nav id="navbar" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="page-scroll navbar-header">
            <button class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#page-top">Rizki Pratama</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="page-scroll active">
                    <a href="#section-1">Section 1</a>
                </li>
                <li class="page-scroll">
                    <a href="#section-2">Section 2</a>
                </li>
                <li class="page-scroll">
                    <a href="#section-3">Section 3</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

....

<div id="section-1">
    <!-- Some content inside -->
</div>
<div id="section-2">
    <!-- Some content inside -->
</div>
<div id="section-3">
    <!-- Some content inside -->
</div>

Upvotes: 1

Marcus Lind
Marcus Lind

Reputation: 11450

Bootstrap Solution

If you're using Bootstrap there is a build in Javascript Component called "Scrollspy" that already exists.

See the documentation.

This expects you to use a <nav> for your navigation, and that all your links that you want to highlight points to valid DOM identifiers such as:

<a href="#my-title">Link</a>

Other ways

There are already a couple of existing Javascript plugins that do this. You can see them here:

Upvotes: 1

Related Questions