Forums

iamacatperson

I guess the best way is to show an example. Like in the case of Lyst Website:

http://www.lyst.com/

If the sidebar is taller than viewport, you can temporarily scroll within the sidebar up until the bottom or top has been reached, in which case, it will become fixed again.

(I have done a script that sort of detects if the bottom of the sidebar has been reached (in which case it will become fixed) but I mess up when I already need to scroll back up. So I think I might be doing it wrong all along.)

Any help to achieve this would be greatly appreciated.

Hompimpa

Try this: http://hompimpa.googlecode.com/svn/trunk/StickyBar/basic.html

iamacatperson

Thanks but I tried this one and it doesn't scroll itself if taller than viewport like in the website example I posted.

Hompimpa

Like this: http://jsfiddle.net/tovic/43eG7/12/

(function() {
    $(window).on("resize", function() {
        $('aside').css('height', $(this).height()).stickyBar({
            until: 'footer'
        });
    }).trigger("resize");
})();

Hompimpa

EDIT:

So... I have edited my plugin to solve some problems. For your case, the sidebar should have two layers of wrapper. One is used to handle the grid layout, and the inner wrapper is used to be a sticky element. This is important considering that this plugin will automatically add a .space-holder element right before the sticky element to fill the empty space when the sticky element changes its position from the initial position to be a fixed position, which usually affects the position of another element:

<aside>
    <div class="inner">
        ...
    </div>
</aside>

Then, the JavaScript:

$(function() {
    $(window).on("resize", function() {
        $('.space-holder').remove();
        $('aside .inner').css('height', $(this).height()).stickyBar({until:"footer"});
    }).trigger("resize");
});

Demo: http://jsfiddle.net/tovic/43eG7/67/embedded/result,html,js,css/

Mull

to Hompimpa; Saya telah mencari tutor seperti ini sejak 3 bulan yang lalu, namun setelah menemukannya saya malah jadi bingung, dimana saya harus meletakkan kode-kode tersebut.

Hompimpa

@Mull ⇒ link

treehouse : what would you like to learn today?

Forums

How to make a sidebar follow scroll, but scrolls self, if it's taller than viewport?