Pure CSS Info-Bar (fixed position demo)

This page demonstrates the Pure CSS Info-Bar, except fixed to the top of the page.

It uses the exact same CSS as the regular Info-Bar, except we override the position. Easy..

All in CSS..

Simply create an overriding class in your style sheet (after the main .site-notice-bar styles), eg..

.fixed-bar { position: fixed; }

And then apply that style class to your info bar along with the regular class, e.g..

  <div class="site-notice-bar fixed-bar" data-tab-text="welcome to corz.org!">
    <p>This is the content of the information panel.
  </div>

OK, it's not entirely in CSS, you still need to add a class name to your div, but it's a clean way of overriding styles, in keeping with the whole cascading-ness of CSS. You might prefer more old-school methods…

On the page..

You can override the position locally, if you prefer. All you need to do is add a style declaration to your <div>, like so..

  <div class="site-notice-bar" data-tab-text="welcome to corz.org!" style="position:fixed">
    <p>This is the content of the information panel.
  </div>

The style="position:fixed" declaration overrides the position:absolute in the CSS (local styles always override) and the Info-Bar sticks to the top of the viewport. Simple.

Of course, the effect only really comes into its own when the user scrolls..

And scrolls..

And scrolls..

Note also how the tab is semi-transparent. Even when it covers your content, you can still see the content.

And scrolls..

And scrolls..

Make Big Fun Now!

;o) corz.org