Allowing offset to defined as a function

[dfrechette]

I have a horizontal list of items in which I need to center the current item. The container that holds the list of items can be easily resized by the user. Therefore, I need the offset setting to be dynamic instead of static.

For this reason, I made the following changes in jquery.scrollTo.js:

1. At line https://github.com/flesler/jquery.scrollTo/blob/master/jquery.scrollTo.js#L193, I added a function to return the offset value

   function offset() {
   return both($.isFunction(settings.offset) ? settings.offset() : settings.offset);
   }
   

2. I removed line https://github.com/flesler/jquery.scrollTo/blob/master/jquery.scrollTo.js#L111

3. I changed line https://github.com/flesler/jquery.scrollTo/blob/master/jquery.scrollTo.js#L157 to

   attr[key] += offset()[pos] || 0;
   

Best regards

[flesler]

Will check this out asap.

[flesler]

One question, are you using "vainilla" scrollTo or serialScroll/localScroll on top?
Considering you call the plugin each time you need to scroll, you can basically define what's the offset before each call by customizing the options object.
If you are using those plugins, you can change the value within the onBefore callback.
Wouldn't that be enough?

[ioleo]

@flesler dynamic offset would be very useful for responsive layouts, for example in twitter bootstrap Hero template, the fixed navbar has 47px. So I need to offset all my localscrolls by 47. But if the viewport is smaller than 980px then responsive bootstrap styles change navbars position from "fixed" to "static"... and then the offset is no longer needed.

In this case it would be great if we could do:

$('.navbar').localScroll({
    duration: 800,
    offset:   { 
        top: function(){ return ($('.navbar').css('position') == 'static') ? 0 : -47 }
    }
});

[ioleo]

For future reference:

• following @flesler 's post this code did the trick:

$('.navbar').localScroll({
    duration: 800,
    onBefore: function(){
        this.offset = {
            top: ($('.navbar').css('position') == 'static') ? 0 : -47
        };
    }
});

[flesler]

I think that's good enough. That's the reason I passed the settings to the
onBefore. What do you think.

On Tue, Mar 26, 2013 at 9:35 AM, loostro notifications@github.com wrote:

For future reference:

• following @flesler https://github.com/flesler 's post this code
  did the trick:

$('.navbar').localScroll({
duration: 800,
onBefore: function(){
this.offset = {
top: ($('.navbar').css('position') == 'static') ? 0 : -47
};
}});

—

Reply to this email directly or view it on GitHubhttps://github.com//issues/20#issuecomment-15455413
.

Ariel Flesler

[ioleo]

@flesler i think onBefore is enough, you might just want to emphersize it in docs - it took me a long while to find out that onBefore is what I needed

[ioleo]

@flesler by the way, thank you for creating and shareing these great plugins 👍