Pure CSS Sticky ElementsEver wonder how those sticky footer stays intact at the bottom of the page? And those lovely bubbles that floats over the page even while scrolling? fed up of trying Jquery and other scripts library available? Here is the quick and complete CSS solution to make any HTML elements sticky. Like my previous Post, all the codes are pure 100% home made CSS.. that means no CSS/ JavaScript library is used.

Lets get Started

Demo Download Code

The HTML

We are making 4 sticky HTML elements Sticky buble,  Sticky left margin banner, Sticky footer, Sticky page center like a light box

<div id=”sticky-buble” >Sticky<br />Buble</div>
<div id=”sticky-Left-Banner” >Left Margin<br />Sticky</div>
<div id=”sticky-center” >Stickey Page Center <br />With Transparency</div>
<div id=”sticky-footer” >Stickey Footer</div>

The CSS

The CSS property that makes sticky is the position: fixed , Position fixed makes the element stay fixed form the position top, left properties define. Unlike the position: absolute property it does not count the position of the element with respect to page , rather it counts the position from the visible screen and that does the trick.

Sticky Buble

#sticky-buble{
position:fixed;
top:400px;
left:50px;
width:130px;
height:50px;
color:#00CCFF;
border-radius: 15px;
background:#000000;
}

Sticky Left Margin Banner

#sticky-Left-Banner{
position:fixed;
top:100px;
left:0px;
height:50px;
background:#000000;
border-radius: 0px 10px 10px 0px;
box-shadow: 2px 3px 5px #888;
}

Sticky footer

#sticky-footer{
position:fixed;
top:95%;
left:5%;
width:90%;
height:50px;
background:#000000;
border:2px solid #00CCFF;
border-radius: 10px 10px 0px 0px;
box-shadow: -2px -2px 15px #888;
}

Sticky Page Center

#sticky-center{
position:fixed;
top:30%;
left:30%;
opacity:0.9;
width:500px;
height:200px;
background:#000000;
border-radius: 15px;
filter:alpha(opacity=90);
box-shadow: 2px 3px 5px #888;
}

Hope you will enjoy this quick CSS trick.

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)
Pure CSS Sticky Elements, Sticky Footer, Sticky Banner, Sticky Margin widgets, 5.0 out of 5 based on 1 rating

2 Responses to Pure CSS Sticky Elements, Sticky Footer, Sticky Banner, Sticky Margin widgets

  1. ajithex says:

    hey love the tricks.

    VA:F [1.9.22_1171]
    Rating: 5.0/5 (1 vote cast)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>