FIXED - Waypoints Navbar Active Accuracy & Dynamic / Responsive Header Height

[keroberts]

To fix the waypoint inaccuracy, and to have a Dynamic header height without relying on using a fixed value padding to compensate:

1 - replace the waypoint v1 library with v2. Can be found here:
https://github.com/imakewebthings/jquery-waypoints .
This is crucial as v2 supports multiple waypoints which will be required.

2 - make sure your header has the class .menu as per the cool kitten grid.

3 - Replace script.js with my extended version below:

jQuery(document).ready(function($){

    $(window).stellar();

    var links = $('.navigation').find('li');
    slide = $('.slide');
    button = $('.button');
    mywindow = $(window);
    htmlbody = $('html,body');

//waypoint 1 for offsetting scroll down
slide.waypoint(function (direction) {

    dataslide = $(this).attr('data-slide');
  if (direction === 'down') {
    $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').prev().removeClass('active');

  }
}, {
  offset: function() {

    return $(".menu").outerHeight(true)+1;
  }
});

//waypoint 2 for offsetting scroll up
slide.waypoint(function (direction) {
 dataslide = $(this).attr('data-slide');
 if (direction === 'up') {
     $('.navigation li[data-slide="' + dataslide + '"]').addClass('active').next().removeClass('active');

  }
}, {
  offset: function() {
    return $(".menu").outerHeight(true)-2; // -1px to pass the waypoint, then another pixel as the jquery animate offset needs -1 to compensate for browser rounding differences 
  }

});

    mywindow.scroll(function () {
        if (mywindow.scrollTop() == 0) {
            $('.navigation li[data-slide="1"]').addClass('active');
            $('.navigation li[data-slide="2"]').removeClass('active');
        }
    });

    function goToByScroll(dataslide, menuHeight) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top - menuHeight
        }, 2000, 'easeInOutQuint');        
    }

    links.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        menuHeight = $(".menu").outerHeight(true)-1; // Calculate .menu height and then subtract by 1px to compensate for browser rounding (when the slide heights aren't whole numbers).
        goToByScroll(dataslide, menuHeight);
    });

    button.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        menuHeight = $(".menu").outerHeight(true)-1; // Calculate .menu height and then subtract by 1px to compensate for browser rounding (when the slide heights aren't whole numbers Chrome rounds the Opposite way to FF and can leave a 1px gap between the slide and head).
        goToByScroll(dataslide, menuHeight);

    });

});

Enjoy!

Notes. You may see a 1px "step" at the end of the scroll animation. I haven't been able to cure this yet, and i think it has something to do with browser rounding on responsive slide heights that aren't whole numbers.

[nokenwari]

Nice one. I like this a lot. Looks like it will also adapt to menu height changes resulting from responsive layout. Can't wait to try it.

[0xbs0d]

you are missing

$(window).stellar();

in your extended script.js. otherwise it works perfectly!

[naoyeye]

@keroberts Thanks guys! Your code saved my life!!
👍

[hellobrunao]

Hi guys! Thanks for this fix, helped me a lot.

However, my parallax effect stopped working after I've updated my old script by yours. I'm using Stellar.js to get the parallax effect.

How can I fix this?

Thanks in advance.

[keroberts]

@immigrantsheep Oh yeah thanks! I missed it off whilst extracting it from my production script :) Now added to the original post.
@BrunoCSousa - Did you include the missing $(window).stellar(); ? If not i've now added it to the original post.

[hellobrunao]

Thanks @keroberts!

I had seen the hint that @immigrantsheep gave. I just didn't know where to insert.

Thanks again!

[canyetim]

thanks! I like it!

[joaquintoral]

Thanks man. this freakin' solved my issues. :(

[cottared]

Hi, everything seems to work better now, but the active link is stuck on the first list item in the navigation.

There are no errors in the code, it just doesnt seem to be running the toggle active state part.

Help?

[karec]

This solution still fixe the issue but be careful you must use the waypoint library in version 2, not the latest version (3 currently)

see https://github.com/imakewebthings/waypoints/tree/2.0