Feature (or docs) Suggestion - Scroll Within

[jvanasco]

1. GREAT library. you saved me a ton of work. it does exactly what I need.
2. I realized that the majority of scrolling work I've needed to do was 'within' another div. eg: in a 2 column layout, the right column will affix as the left column scrolls down. looking around the web, this seems to be the most common use case scenario.

The fastest way I've found to handle this is to just automate with a function and some css markup , which is super simple. I figured it would be worth mentioning here though , because something that achieves this effect might work well in the core:

 <div>
    <div id="a">
        <div id="a-scrollwithin">Long Column</div>
        <div id="a-scroller" data-scrollwithin="a-scrollwithin">Scrolling element</div>
    </div>
    <div id="b">
        <div id="b-scrollwithin">Long Column</div>
        <div id="b-scroller" data-scrollwithin="b-scrollwithin">Scrolling element</div>
    </div>
 </div>

function scrollwithin( scroller , marginTop ) {
    marginTop = typeof marginTop !== 'undefined' ? marginTop : 10;
    var _scrollwithin = $( '#' + scroller.attr('data-scrollwithin') );
    scroller.scrollToFixed({
        marginTop: marginTop  ,
        limit: ( ( _scrollwithin.offset().top + _scrollwithin.outerHeight() ) - scroller.outerHeight() )
    });
};
$(document).ready(function() {
    scrollwithin($('#a-scroller'),10);
    scrollwithin($('#b-scroller'),10);
});

[bigspotteddog]

I am glad the plugin helped. This is a great suggestion as the scenario does come up a lot. I will look at rolling this type of solution into the core as soon as I have a chance to wrap my head around your solution.

Thanks for your contribution. This will help others.

[jvanasco]

I guess I could have clarified what I did a lot better !

every item i tell to scrollwithin , eg '#a-scroller', has an attribute called 'data-scrollwithin', which is the id of the partner or parent column.

the scrollwithin() function grabs the node of the other element and then calculates the limit based on the offset+height of the scrolling element , mins the height of the affixed element.

[bigspotteddog]

This is cool! Thanks again for this.

[jvanasco]

fyi, my original code was completely wrong when calculating the limits.

i ended up with this:

function scrollwithin( scroller , marginTop , estimatedMinScrollerSize , zIndex ) {
    marginTop = typeof marginTop !== 'undefined' ? marginTop : 10;
    zIndex = typeof zIndex !== 'undefined' ? zIndex : 100;
    var scrollmax = $( '#' + scroller.attr('data-scrollmax') );
    var scrollerSize = scroller.outerHeight() ;
    if (estimatedMinScrollerSize) {
        if ( scrollerSize < estimatedMinScrollerSize ) {
            scrollerSize = estimatedMinScrollerSize ;
        }
    }
    var limit = ( ( scrollmax.offset().top + scrollmax.outerHeight() ) - scrollerSize - marginTop ) ;
    if ( scrollerSize > scrollmax.outerHeight() ) {
        return;
    }
    scroller.scrollToFixed({
        marginTop: marginTop ,
        limit: limit ,
        zIndex : zIndex
    });
};

[bigspotteddog]

Great! Thanks for sharing.

[jkbrook]

Thanks for posting this. I'm trying to get this working from your example, but I'm not 100% sure what your example is intended to do. Is it possible to see the CSS as well? Thanks.

[jvanasco]

Here you go -

http://www.2xlp.com/demo/ScrollToFixed-scrollwithin/

1. scrollwithin is called for the div "#scroller-side"
2. "#scroller-side" has the attribute "data-scrollmax" set to "#scroller-main"
3. You'll note that once you pass the end of the "#scroller-main" div, scrolling stops (either direction).

It looks like there's some issue with this css that's causing it to jump a few pixels to the side. i'll look into that later.