Grow your CSS skills. Land your dream job.

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

  • # September 14, 2012 at 2:31 am

    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.

    # September 17, 2012 at 9:57 pm

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

    # September 18, 2012 at 1:41 pm

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

    (function() {
    $(window).on("resize", function() {
    $('aside').css('height', $(this).height()).stickyBar({
    until: 'footer'
    });
    }).trigger("resize");
    })();
    # November 8, 2012 at 9:27 am

    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/

    # January 31, 2013 at 7:43 am

    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.

    # January 31, 2013 at 9:39 pm

    @Mulllink

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".