samedi 9 mai 2015

Sticky div to top of screen when scrolled

I have a Wordpress site with a Jumbotron, inside is a div 'sticky' which is positioned:absolute to the bottom. The jumbotron has a fixed height and I would like the div to 'stick' to the top of the screen when scrolled to.

I have seen multiple threads/examples on the subject but none seem to work for me (most not written in a format that works with/for Wordpress)

What is the best approach to making it work in WP (using function.php, etc)

HTML

<div class="row col-md-12">
 <div class="jumbotron">
    <div class="sticky"><p>CURRENT WORK</p></div>
 </div>
</div><!-- /row -->

CSS

.jumbotron {
  margin: 0;
  width: 100%;
  height: 400px;
  background-color: #fff;
}

.sticky {
  position: absolute;
  bottom: 0; right: 0;
  background-color: red;
  padding: 0 5px;
  width: 200px;
  text-align: center;
}

Aucun commentaire:

Enregistrer un commentaire