Question

I’m having some trouble with a script which takes care of smooth scrolling as well as the active state on my main navigation. Plugin: http://tinyurl.com/amz4kob

Please note that the navigation bar is fixed so effectively has no height.

I’ve got two issues which I can’t seem to overcome:

1. On page load the active state is applied to the contact link. If you scroll down 1px the active state is correctly applied to the home link.
2. I can’t for the life of me figure out how to modify the script to pay attention to anchors within an element with a certain ID? i.e. I only want this script to apply the active state to the elements within the tag.

Any help would be greatly appreciated.

@rrfive

To make life easy here is the commented script:

$(document).ready(function() {
//Get Sections top position
function getTargetTop(elem){

    //gets 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;

    //Gets the distance from the top and subtracts the height of the nav.
    return $(id).offset().top - offset;
}

//Smooth scroll when user click link that starts with #
$('a[href^="#"]').click(function(event) {

    //gets the distance from the top of the section refenced in the href.
    var target = getTargetTop($(this));

    //scrolls to that section.
    $('html, body').animate({scrollTop:target}, 500);

    //prevent the browser from jumping down to section.
    event.preventDefault();
});

//Pulling sections from main nav.
var sections = $('a[href^="#"]');

// Go through each section to see if it's at the top.
// if it is add an active class
function checkSectionSelected(scrolledTo){
    //How close the top has to be to the section.
    var threshold = 54;

    var i;

    for (i = 0; i < sections.length; i++) {

        //get next nav item
        var section = $(sections[i]);

        //get the distance from top
        var target = getTargetTop(section);

        //Check if section is at the top of the page.
        if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
            sections.removeClass("active");
            section.addClass("active");
        }
    };
}

//Check if page is already scrolled to a section.
checkSectionSelected($(window).scrollTop());

$(window).scroll(function(e){
    checkSectionSelected($(window).scrollTop())
});

});

Answer 1

The plugin you’re using checks the position of the <div class="section"></div> elements on the page, but because you’ve made them display:none;, all the sections are returning “0 pixels” from the top of the page, and since the “CONTACT” section is the last on the page, it’s stopping there.

So, simply remove display:none; from .section in your CSS and it’ll work fine.

.section {
    /*display: none; <-- Comment this line out. */
    height: 100%;
    min-width: 990px;
}