Documentation & Tutorials. We have a great selection of tutorials to help you make the most of your theme.

Sticky Side Block

Mick in Tutorials on 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.



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.

Tagged with: smf sticky sidebar hack 


Mick

Mick G

idesignsmf.com

    

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




Latest Discussions

Join the conversation

Our Most Popular Features