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.

demo

The CSS:
Open your /css/index.css and add at the very end.

Code Select Expand

#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:

Code Select Expand

</body></html>';
}


Add before:

Code Select Expand

<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):

Code Select Expand

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

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.

demo

The CSS:
Open your /css/index.css and add at the very end.

Code Select Expand

#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:

Code Select Expand

</body></html>';
}


Add before:

Code Select Expand

<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):

Code Select Expand

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

Custom Login Block

CSS Sticky Fixed Footer

Collapsible Content Block

Simple Recent Topics Block

SSI News Side PHP Block