Jquery Waypoints Sticky Nav When Scrolling Up Via A Click Is 1px Off

I'm close to tearing my hair out with Waypoints. First of all, I'm far from being experienced in javascript. I'm using Waypoints to 1) fix the nav to the top of the screen at a cer

Solution 1:

It's definitely a strange one. There seems to be a 3px border on your header which might be causing the issue. However if you increase the offset of your waypoints from 50 to 53 seems to fix the problem.

var sections = $("section");
var navigation_links = $("nav a");

    sections.waypoint({
        handler: function (event, direction) {

            var active_section;
            active_section = $(this);
            if (direction === "down") active_section = active_section.prev();

            var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
            navigation_links.removeClass("selected");
            active_link.addClass("selected");

        },
        offset: 53
    })