Dynamically update 'offset' parameter

[Sito.Express]

Hi there,

I'm using localScroll on several websites using this simple setup:

localOffset = jQuery('.site-header').outerHeight();
jQuery('.main-navigation').localScroll({
	offset: -localOffset,
});

It works just fine when the site-header height doesn't change, however sometimes I have to deal with dynamic headers that shrink when the user scrolls down.

When it happens, there's obviously a misalignment of a bunch of pixels between the anchor position and the shrinked header.

I was wondering if there's a way to dynamically adjust the offset parameter according to the most-updated value, such setting a timer.

Thanks in advance

[Ariel Flesler]

You need to use the onBefore() option provided by jquery.scrollTo to send a callback and modify the settings before each call

[Sito.Express]

Hi @flesler i tried with the following setting:

onBefore: function() { this.offset = { top: -jQuery('.site-header').outerHeight(), }; }

But it doesn't work, as the header reduces its height while the page scrolls. Instead onBefore seems to catch the header height on click, when the header is still thick.

Obviously on the second click the offset is applied correctly, until the page won't scroll to top causing the header to become thick again.

[Ariel Flesler]

That problem is specific to your site, in that you'll need to figure out how to work around it. Not a issue with the plugin, if you need help you should consult on StackOverflow

[Sito.Express]

Yeah you're right: it's a problem around the plugin, not a problem of the plugin itself. Unfortunately, it's not a problem specific to my site, as shrinking headers are becoming a popular design pattern. I was just asking if there was a builtin solution or some setting I didn't know about. Even if the issue is around the plugin, it should be of your interest, because if a plugin like jQuery ScrollTo/localScroll misaligns the target content in a (very) common design solution like a shrinking header, then it looses part of its usefulness.