Last Updated:

How to create floating blocks for a website

On sites with a lot of information, whether textual or multimedia, navigation blocks remain at the top of the site, and often you have to rewind the page back up, so in this lesson we will consider several ways to create a floating block for the site, or what else to call them - the sidebar. The bottom line is that when scrolling down, our floating blocks with the necessary information will slide down. Quite a convenient and practical thing if you want to simplify navigation on your site.

 

In this tutorial we will look at two ways to create them, the first using CSS, and the second with the jQuery library, this is how it looks, in the demo I have both samples:

1.CSS. Consider the first and perhaps the easiest way is to use fixed positioning. Our sidebar is inside a relatively positioned #page-wrap layer, so the sidebar will fit perfectly — we just need to move it to the left using the margin property. Thanks to this, our block will always remain in the same place of the village:

 

 

 

2. The second no less interesting way is to use the jQuery library, plus this block is that it will smoothly slide with the scroll of the page, if the distance is greater than the starting top position of the sidebar, we can change the top margin of the sidebar and lower it to the visible part of the monitor.

$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
}
});
});

This method is not complicated, but this effect falls more to the user's eye. Also, the advantage of these blocks is that they are supported by all browsers. That concludes the lesson.