Sticky Side Block

Started by Mick, Jul 28, 2013

Jul 28, 2013 Last Edit: Jan 29, 2019 by Mick

You have seen this trick on Facebook. The side block is fixed when the user scrolls down the page. I'll explain how to create a sticky sidebar block that will scroll down with the user. Excellent to put your advertisement, news feed or any other code. For this to work as it should, the block should be last in your block list.



The CSS:
Open your /css/index.css and add at the very end.
#sidebar {
    width: 300px;
    height: 400px;
    position: absolute;
    padding-left: 20px;
    margin: 5px;
}

#sidebar.fixed {
    position: fixed;
    top: 0;
}

Change the height and width according to your needs.

The Javascript:
Open your theme's index.template.php and find:
</body></html>';
}



Add before:
<script type="text/javascript">
$(function() {
    var top = $("#sidebar").offset().top - parseFloat($("#sidebar").css("marginTop").replace(/auto/, 0));
    var footTop = $("#footer").offset().top - parseFloat($("#footer").css("marginTop").replace(/auto/, 0));

    var maxY = footTop - $("#sidebar").outerHeight();

    $(window).scroll(function(evt) {
        var y = $(this).scrollTop();
        if (y > top) {
            if (y < maxY) {
                $("#sidebar").addClass("fixed").removeAttr("style");
            } else {
                $("#sidebar").removeClass("fixed").css({
                    position: "absolute",
                    top: (maxY - top) + "px"
                });
            }
        } else {
            $("#sidebar").removeClass("fixed");
        }
    });
});
</script>



The Side Block (HTML):
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>


Replace the contents inside the DIV with your own. Google adsense, text, whatever.