Question

Sorry that question is a bit wishy washy. Let me explain the effect I’m after:

Instead of just using position:fixed on a button that is left:0 and top:50%, I’ve seen effects on the web where when the user scrolls down, the button (and rest of the page heads upwards), but the button eases back into it’s original fixed position. So it’s much more noticeable than just a css fixed item.

I’m having a real hard time googling this effect. I can’t remember what sites I’ve seen it on but it usually contains social/share buttons when scrolling down an article.

Can anyone help?

Answer 1

You can use a fairly simple jQuery code snippet taken directly from here: http://css-tricks.com/scrollfollow-sidebar/ (not my code)

$(function() {

    var $sidebar   = $("#sidebar"), 
        $window    = $(window),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });

});

Of course, change #sidebar to match your button.