jimmynotjim / scrollnav

A dependency free JavaScript plugin for auto generating single page navigation
http://scrollnav.com
MIT License
461 stars 127 forks source link

Bug on scroll and click #110

Open hevertonsb opened 3 years ago

hevertonsb commented 3 years ago

Hi, sorry about my english, but i hope you understand my problem.

I'm using scrollnav.js plugin on this page (http://edf-re.web36f05.kinghost.net/quem-somos/edf-mundo/), but I'm facing a bug.

On click and scroll the content is not aligned with the vertical menu. Can anybody help me? I've tried changing some parameters, but nothing solved.

The calling code for the plugin is this:

if (1 < $('.section-title').length) {
    $('#content').scrollNav({
        sections: '.section-title',
        subSections: true,
        sectionElem: 'div',
        showHeadline: false,
        showTopLink: false,
        scrollOffset: $('#header').outerHeight(),
        fixedMargin: $('#header').outerHeight()
    });

    $('body').addClass('has-scroll-nav');

    $(window).scroll(function() {
        var limit = $('#content').offset().top + $('#content').height();
        var scrollTop = $(document).scrollTop() + $('.scroll-nav .scroll-nav__wrapper').outerHeight() + $('#header').outerHeight();
        var difference = scrollTop - limit;

        if (limit < scrollTop) {
            $('.scroll-nav .scroll-nav__wrapper').css('margin-top', 0 - difference);
        }
        else  {
            $('.scroll-nav .scroll-nav__wrapper').css('margin-top', 0);
        }
    });
}

I would like when clicking or scrolling, the title was visible on the page. Thanks

jimmynotjim commented 3 years ago

It looks like you're using the older version of ScrollNav, make sure you're referencing the docs here https://scrollnav.com/v2/. My initial guess was you need to modify the scrollOfset to account for the sticky header but it looks like you're doing that. It could be possible the header isn't completely rendered and so the outer height is being miscalculated. You might have to wait for that before initializing the plugin.