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

[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.

[Taufik Nurrohman]

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.

[Taufik Nurrohman]

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

(function() {

$(window).on("resize", function() {

$('aside').css('height', $(this).height()).stickyBar({

until: 'footer'

});

}).trigger("resize");

})();

[Taufik Nurrohman]

EDIT:

So…
I have updated 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 () {

$('aside .inner').stickyBar({

until: "footer"

});

});

Demo: http://jsfiddle.net/tovic/43eG7/78/

[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.

[Author]

Posts