Home/ Questions/Q 7636185
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T07:36:35+00:00

My page is a single page website which has a pageslide navigation on the

  • 0

My page is a single page website which has a pageslide navigation on the side which has an id of “navigation”. My main section is a fully fluid 100% wide design and it only changes when a button on the side is pressed to reveal the navigation menu. On this navigation menu, I want to be able to change the class of the links between two classes e.g “active” and “nonactive” and i want this to change depending on the position the user is scrolled at, i.e if the position the user is scrolled at is on the div id of “about”, i want the class in the navigation that links to about to have a class of “active” and the rest of the links as “nonactive”. This will be for every link.

My website is at http://sandbox.modernturtle.com

Any help would be appreciated 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Twitter Bootstrap has a plugin that does this for you. Here is a demo: http://twitter.github.com/bootstrap/javascript.html#scrollspy

    EDIT:
    Initialize the plugin like so:

    $('#navigation').scrollspy();

    Then add the data-spy attribute to the body tag:

    <body data-spy="scroll" >...</body>

    And at last (this step you already have on your site), match the navigation link’s href to the div’s id:

    <a href="#about" onclick="$.scrollTo( '#about', 1000, {easing:''} ); CngClass(this);" class="selected">about</a>

<div id="about">
    • 0