There are several tutorials on how to make things “sticky” using CSS. We will make a “sometimes sticky” element using CSS and jQuery. Here is an article on CSS sticky footers to help you understand before we move onto the “sometimes” part using jQuery.

Remember –  position: fixed; in a CSS sticky element is in a fixed position relative to the element or “container” it’s in.

 

CSS Sticky Class

The main points for this CSS sticky element are position: fixed; and top: 75px; Z-index helps keep it “on top” when the user scrolls.

 

HTML for Sometimes Sticky Element

This is just a general idea of the HTML needed.

 

jQuery for Sometimes Sticky Element

 

CSS Sticky Footer, Sticky Header, and Sometimes Sticky Side Bar Demo

The demo link below has a CSS sticky footer, sticky header, and a sometimes sticky sidebar element. Note where the HTML for the sticky side bar is within the “wrapper”(<div id=”wrapper”>). The sticky sidebar helps illustrate that it is in a fixed position relative to the “container” it’s within. The sticky footer and header are outside of the “wrapper.” The CSS sticky footer and header are fixed relative to the body tag. The body tag is the “container.” Also notice margins added to header and footer to compensated for sticky footer and header so that they don’t cover content the way the sticky sidebar does.

View Demo Sometimes Sticky Element

 

I got the idea for this from Honkiat.com.

 

Are you most likely to make a CSS sticky footer, sticky header, or other? Please leave a comment.

 

 

Search Terms:
CSS sometimes Sticky Element, CSS sometimes Sticky Footer, CSS sometimes sticky side bar, sticky footer, CSS sticky element, CSS sticky header, CSS sticky side bar, 2013 CSS sticky footer, sticky, sidebar, CSS sticky element, sticky footer, CSS Sometimes sticky sidebar, CSS Sometimes sticky element

 

 

 

Leave a reply

required

<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="">