Dynamic Offset for jQuery One Page Nav

jQuery-One-Page-Nav is a nice script that enables you to scroll smoothly to anchors anywhere on a page while and while it does so it sets a current class for your currently active navigation item.

As this is often combined with a fixed or sticky navigation design there’s an option to set an offset to define how far scrolling takes you. With Responsive Webdesign your sticky element (header in my example) might have a different height depending on the viewport the page is being displayed on.

So I thought it’s a good idea to set this offset dynamically so I scrolling never takes me accidentally under my fixed header:

var top_offset = $('header').height() - 1;

$('.active-parent .dropdown ul').onePageNav({
    currentClass: 'current',
    changeHash: false,
    scrollSpeed: 750,
    scrollOffset: top_offset,
    scrollThreshold: 0.5,
    filter: '',
    easing: 'swing',
    begin: function() {
        //I get fired when the animation is starting
    },
    end: function() {
        //I get fired when the animation is ending
    },
    scrollChange: function($currentListItem) {
        //I get fired when you enter a section and I pass the list item of the section
    }
});
Tags: 

Need a great new website or a helping hand with Drupal? Head over to www.klickreflex.de or contact me directly to see if we can work something out.