Sticky Bar

desc

by Eshin Jozer

HTML

<html>
  <head>
    <title>Sticky Notification Bar</title>
  </head>
  <body>
    <div id="sticky_bar">
	    <div id="sticky_bar_text">
		    Your notification goes here ..
	    </div>
	    <div id="sticky_bar_btn">
		    <a target="_blank" class="btn" href="#">Sample Button</a>
	    </div>
    </div>
    
    <p>
      The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
    </p>
  </body>
</html>

CSS

body {
  min-height:150vh
}
#sticky_bar {
    padding: 8px 5px;
    background: #222;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 999;
    text-align: center;
    box-shadow: 0px 1px 11px #888888;
    color: #fff;
    font-family: 'Viga', sans-serif;
    font-size: 1.1em;
}
#sticky_bar_text, #sticky_bar_btn {
    display: inline-block;
}
#sticky_bar_btn a {
  background:red;
  color:#fff;
  padding:2px 5px;
  text-decoration:none;
  border-radius:3px;
}