Free Forever. Our themes will always be free. Forever. Period.

Sticky Side Block

Mick in Tutorials
Jul 28, 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.


**Scroll up!

The CSS:
Open your /css/index.css and add at the very end.
Code: [Select]
#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]
</body></html>';
}


Add before:
Code: [Select]
<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]
<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.

Tagged with:

Share This Post

Mick

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 and has a weakness for Tacos and Pizza.

    


0 Comments



Connect with us:


Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.




go up