Customize Link Appearance Depending on Current Section

Question

Customize Link Appearance Depending on Current Section

Looking for a way to dynamically change the color of navigation links based on which section of the page a user is currently viewing? Here's an example setup:

<div id="topNav">
     <ul>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#web_design">Web Design</a></li>
          <li><a href="#home">Home</a></li>
     </ul>
</div>

<div id="home">
     <img src="images/dog.jpg" class="bg" />
</div>
<div id="web_design">
     <img class="titleImage" src="images/web_design.jpg" />
</div>
<div id="contact">
     <img class="titleImage" src="images/contact.jpg" />
</div>

To achieve this, you can use a CSS class "selected" on list items corresponding to the current section like so:

#topNav li.selected a {
    color: #cbcacc;
}

Your menu will now update its link colors based on the user's location on the page. Hope this helps!

javascript jquery html css viewport

Answer 1

Answer №1

Consider utilizing a tool known as scrollspy. Various resources can be found online:

Check out this lightweight example on jsFiddle
Explore some jQuery scrollspy plugins in the jQuery plugin registry
Try using the Bootstrap scrollspy JavaScript plugin

If you need more information, try searching with the keyword scrollspy.

The following code is from the above jsFiddle:

JS

// Selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    
    menuItems = topMenu.find("a"),
   
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Click handler for fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Scroll binding
$(window).scroll(function(){
   
   var fromTop = $(this).scrollTop()+topMenuHeight;

  
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});

HTML

<div id="topNav">
     <ul>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#web_design">Web Design</a></li>
          <li><a href="#home">Home</a></li>
     </ul>
</div>
<div class="spacer"></div>
<div id="home">
     <img src="images/dog.jpg" class="bg" />
</div>
<div id="web_design">
     <img class="titleImage" src="images/web_design.jpg" />
</div>
<div id="contact">
     <img class="titleImage" src="images/contact.jpg" />
</div>

CSS

#topNav {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 20px;
}

div.spacer {
    height: 80px;
}

#topNav li.selected a {
    color: #cbcacc;
}

Answer 2

Consider utilizing a tool known as scrollspy. Various resources can be found online:

Check out this lightweight example on jsFiddle
Explore some jQuery scrollspy plugins in the jQuery plugin registry
Try using the Bootstrap scrollspy JavaScript plugin

If you need more information, try searching with the keyword scrollspy.

The following code is from the above jsFiddle:

JS

// Selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    
    menuItems = topMenu.find("a"),
   
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Click handler for fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Scroll binding
$(window).scroll(function(){
   
   var fromTop = $(this).scrollTop()+topMenuHeight;

  
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});

HTML

<div id="topNav">
     <ul>
          <li><a href="#contact">Contact</a></li>
          <li><a href="#web_design">Web Design</a></li>
          <li><a href="#home">Home</a></li>
     </ul>
</div>
<div class="spacer"></div>
<div id="home">
     <img src="images/dog.jpg" class="bg" />
</div>
<div id="web_design">
     <img class="titleImage" src="images/web_design.jpg" />
</div>
<div id="contact">
     <img class="titleImage" src="images/contact.jpg" />
</div>

CSS

#topNav {
    width: 100%;
    height: 60px;
    position: fixed;
    top: 20px;
}

div.spacer {
    height: 80px;
}

#topNav li.selected a {
    color: #cbcacc;
}

Answer 3

Answer №2

One fascinating selector in CSS3 is :target, which allows you to style your links based on their targets. An example of how to use it can be seen below:

:target{color:#ff0000;}

For more information on the CSS3 target selector, consider searching on Google.

Answer 4

One fascinating selector in CSS3 is :target, which allows you to style your links based on their targets. An example of how to use it can be seen below:

:target{color:#ff0000;}

For more information on the CSS3 target selector, consider searching on Google.

Customize Link Appearance Depending on Current Section

Answer №1

Answer №2

Similar questions

Changing the visibility of a button based on a checkbox in JavaScript - here's how

Manipulating the DOM with AngularJS directives is not functioning as expected

Is it possible to use tabs.create to generate a tab and then inject a content script, where the code attribute is effective but the file attribute seems to be ineffective

Fixing the hydration error in Next 13 can be challenging, especially when it occurs outside of a Suspense boundary

Trouble with targeting a specific css class

Changing the font-family to 'Symbol' and using Windows-1252 character encoding

Tips for implementing a controlled RadioGroup in React: Mapping through an array of values to dynamically populate radio buttons

VueJS throws an error indicating that the object cannot be extended

Implementing a Fixed Navbar in VueJS on Scroll

disappearance of background image at bootstrap breakpoint

JavaScript drag functionality is jerky on iPads, not seamless

Jumping Iframe Anchor Link in Src

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

What is the correct way to establish and terminate a MongoDB connection in a Node.js application?

MUI version 5 - Checkboxes are receiving a variety of unique classes

Is it possible to invoke an AngularJs service by clicking a button?

When hovering, the CSS border-bottom should extend

BASH-SHELL SCRIPT: Display a specific portion of content from a file

What is the best way to implement debouncing for an editor value that is controlled by the parent component?

Updating a specific field within an array in a Meteor object using MongoDB