Simple floating block script

This floating block is perfect for placing an advertising block or banner in it.

To create a floating block (floating banner) on your site, you will need to connect the jQuery library. It is connected as follows:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>

The block that will move after scrolling the page should be located inside the parent block and have id=”floating_block”:

<div style="height: 1000px; width: 300px; border: 1px solid #000000;">
    <div id="floating_block"><img src="400.png"></div>
</div>

All the work on moving the floating block is done by JavaScript code, which is recommended to be placed at the end of the page with the block:

<script type="text/javascript">
$(document).ready(function() {
var footer = 90;
var position = $("#floating_block").offset().top-20;

$(window).scroll(function(){
 var scroll = $(window).scrollTop();
 if ($("#floating_block").height()<$(document).height()-footer-scroll) {
    if (scroll>position) {
        $("#floating_block").stop().animate({"paddingTop" : scroll-position}, 400);
    }
    else $("#floating_block").stop().animate({"paddingTop" : 0}, 400);
 }
});
$(window).trigger("scroll");
});
</script>

The variable var footer = 90; sets the value of the “basement” of the site to which the floating block will move. This value is necessary so that the floating block does not “climb” on the content in the “basement” of the site.

In the line var position = $(“#floating_block”).offset().top-20; the value 20 sets the offset from the upper border of the browser window to the floating block.

Line $(window).trigger(“scroll”); needed for initial positioning of the floating block in height. It is necessary if the user scrolled down the page and then updated the page.

As a result of using this simple floating block script using jQuery, you will be able to make exactly the same floating blocks as in the side columns of our site.