Sticky Side Block

Written by Mick in Tutorials on 28 Jul 2013


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.

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
0 Comments



Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.