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

 

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 Left Margin Banner

 

Sticky footer

 

Sticky Page Center

 

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

3 thoughts on “Pure CSS Sticky Elements, Sticky Footer, Sticky Banner, Sticky Margin widgets

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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">