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


Leave a Reply