Tips for ensuring each page section has a highlighted link

Question

Tips for ensuring each page section has a highlighted link

Currently, I am utilizing the one page scroll plugin available at https://github.com/peachananr/onepage-scroll. My website consists of 4 links and 4 sections. What I aim to do is have the link highlighted when on a specific section. For instance, when scrolling to the about section, the about link should be highlighted. Similarly, when reaching the homepage, the homepage link should stand out. Does anyone know how I can achieve this using the aforementioned plugin?

Your assistance would be greatly appreciated.

I want the links to be highlighted similar to the functionality seen on this website: . However, I am uncertain about how to implement this using the plugin mentioned above.

javascript jquery css plugins jquery-plugins

Answer 1

Answer №1

To implement highlighting in your onepage_scroll function, add the following code:

afterMove: function(index) {
  // you can apply javascript to highlight the link here
}

For instance, if your links have css classes "link1" and "link2" and a css class "highlight" for the desired highlighting effect, you can do something similar to this:

afterMove: function(index) {
  if(index === 0){
    $(".link1").toggleClass("highlight")
  }
  if(index === 1){
    $(".link2").toggleClass("highlight")
  }
}

Please note that jQuery is required for this method, and it also automatically removes the highlight when scrolling past each section.

Answer 2

To implement highlighting in your onepage_scroll function, add the following code:

afterMove: function(index) {
  // you can apply javascript to highlight the link here
}

For instance, if your links have css classes "link1" and "link2" and a css class "highlight" for the desired highlighting effect, you can do something similar to this:

afterMove: function(index) {
  if(index === 0){
    $(".link1").toggleClass("highlight")
  }
  if(index === 1){
    $(".link2").toggleClass("highlight")
  }
}

Please note that jQuery is required for this method, and it also automatically removes the highlight when scrolling past each section.

Answer 3

Answer №2

By checking out the documentation, you can see that the plugin being used has support for callbacks. All you need to do is implement it correctly. Below is a sample code demonstrating how to highlight a link using this feature:


$(".main").onepage_scroll({
    afterMove: function(index) {
        if (index === 2) {
            $('#about-link').css({
                "background-color", "yellow"
            });         
        }
    }
});

To see this in action, check out the live demo here: http://jsfiddle.net/preeteshjain/mnL5Lsmz/

Answer 4

By checking out the documentation, you can see that the plugin being used has support for callbacks. All you need to do is implement it correctly. Below is a sample code demonstrating how to highlight a link using this feature:


$(".main").onepage_scroll({
    afterMove: function(index) {
        if (index === 2) {
            $('#about-link').css({
                "background-color", "yellow"
            });         
        }
    }
});

To see this in action, check out the live demo here: http://jsfiddle.net/preeteshjain/mnL5Lsmz/

Tips for ensuring each page section has a highlighted link

Answer №1

Answer №2

Similar questions

What could be causing the image to not show up?

What is preventing my for loop from reaching the initial index in this visually distinct nested array pattern?

Which is the preferred option for constructing and designing forms - using the <table> tag or <div> tags?

Error: The module could not be found due to an inability to resolve the parsed request

Utilizing API to Save Images Directly from the Client Side

Website generates dynamic ID for Selenium IDE

How to shift a bootstrap-4 button to the right without disrupting the layout

Tips for incorporating material-ui icons into the column component of a data-grid component

Conceal flexbox item depending on neighboring element dimensions or content

Leverage React.JS to iterate through arrays and objects, rendering data seamlessly - even within nested objects

Encountered an Internal Server Error (500) while attempting to create a new user through localhost:8800/api/auth/register

Error in Typescript: Cannot assign type 'number' to type 'never'

Content positioned beside an image with the help of Bootstrap 4 framework

What is the most effective way to bring in "server-side only" code in Next.js?

Is it possible to use wildcards in Socket.io rooms or namespaces?

Does SameSite=Lax grant permission for GET requests from third-party sources?

Passing Parameter on Angular Material Select Closure Event md-on-close

Implementing varying font sizes for a mobile device in GWT utilizing CssResource and @if condition

Tips for applying multiple colors to text within an option tag

Repeated IDs in Angular input components