Today I am going to teach you how to make a sticky floating box on the page. Did you saw any webpage that got a cool floating sticky toolbar/menu or box when you scroll the page. You think yes, I could use a CSS property position: fixed . No, it’s not about just fixed position box that moves when you scroll, it is about when you scroll the page, but it is not moving only on one condition when it is going to hide. Here is an example.

And here is a full code:

var stickyBox = $(".sticky-box");
var stickyBoxPosition = stickyBox.offset().top;
stickyBox.css('position', 'relative');

$(window).scroll(function(){
if(stickyBoxPosition < $(window).scrollTop()) {
stickyBox.stop().animate({
"top": ($(window).scrollTop() - stickyBoxPosition) + "px"
}, "fast" );
} else {
stickyBox.css('top', 0);
}
});

Comments:

var stickyBox = $(".sticky-box");

.sticky-box is your div or other element class that you want to stick. Where you add this class on any of element it will float.

var stickyBoxPosition = stickyBox.offset().top;

Get element position form the top

stickyBox.css('position', 'relative');

give it a relative position that it could float on the top of content

$(window).scroll(function(){

all logic goes here when you scroll the window

if(stickyBoxPosition < $(window).scrollTop()) {

now check if box is going to hide when you scroll

stickyBox.stop().animate({ "top": ($(window).scrollTop() - stickyBoxPosition) + "px"}, "fast" );

this is box scrolling animation if the box is going to hide. It will allways stick at the top of the window view

} else {
stickyBox.css('top', 0);

and if the box is not going to hide, then leave it alone

Conclusion

So it is so simple. I am not good teacher, but I hope you will understand All this script goes to document ready $(function(){ …. script here … }); and add to the elements you want a class sticky-box . Try it yourself!