I'm currently facing an issue with a script that handles smooth scrolling and the active state on my main navigation. The plugin in question can be found at:
It's important to note that the navigation bar is fixed and therefore has no height.
There are two specific challenges that I am struggling to resolve:
- Upon page load, the active state is initially applied to the contact link. However, if you scroll down by just 1px, the active state correctly switches to the home link.
- I've been unable to modify the script to focus on anchors within an element with a particular ID. In other words, I only want the script to apply the active state to elements within the
<nav>tag.
Any assistance on this matter would be highly appreciated.
@rrfive
For your convenience, here is the annotated script:
$(document).ready(function() {
//Get Sections top position
function getTargetTop(elem){
//fetch the id of the section header from the navigation's href (e.g., "#html")
var id = elem.attr("href");
//Height of the navigation
var offset = 0;
//Determine the distance from the top and deduct the nav's height
return $(id).offset().top - offset;
}
//Smooth scroll when a user clicks a link starting with #
$('a[href^="#"]').click(function(event) {
//calculate the distance from the top of the section referenced in the href
var target = getTargetTop($(this));
//scroll to that section
$('html, body').animate({scrollTop:target}, 500);
//prevent the browser from immediately jumping to the section
event.preventDefault();
});
//Pull sections from the main nav
var sections = $('a[href^="#"]');
// Check each section to see if it's at the top; if so, add an active class
function checkSectionSelected(scrolledTo){
//Define how close the top must be to the section
var threshold = 54;
var i;
for (i = 0; i < sections.length; i++) {
//retrieve the next nav item
var section = $(sections[i]);
//determine the distance from the top
var target = getTargetTop(section);
//Verify if the section is at the top of the page
if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
sections.removeClass("active");
section.addClass("active");
}
};
}
//Check if the page is already scrolled to a section
checkSectionSelected($(window).scrollTop());
$(window).scroll(function(e){
checkSectionSelected($(window).scrollTop())
});
});