滚动时将div粘贴到屏幕顶部

Question

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;
}

Answer 1

First of all, give .jumbotron a relative positioning

position: relative;

And .sticky a height value

height:40px;

You will also need to add an anchor DIV inside the sticky DIV

<div class="sticky"><div id="anchor"></div><p>CURRENT WORK</p></div>

and then the following javascript

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.sticky').css('position', 'fixed');
          $('.sticky').css('top', '0');
          $('.sticky').css('z-index', '10000');
       } 
   });
    }
});

See it here: http://jsfiddle.net/ubLgaktp/

EDIT: you can add the javascript to the page itself by putting the following between your head tags

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"</script>
<script>
$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $('.sticky').css('position', 'fixed');
          $('.sticky').css('top', '0');
          $('.sticky').css('z-index', '10000');
       } 
   });
    }
});
</script>

EDIT:

Here is a better approach. Use the anchor div to add and remove a class to the div as opposed to changing the class. This way the sticky div become 'unstuck' if the viewer scrolls back down.

Here is the jsfiddle...

http://jsfiddle.net/bh40k8Lg/

the HTML

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

the CSS

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

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

.sticky-top {
    position:fixed!important;
    top:0!important;
    z-index:10000!important;
}

the Javascript which you can put between your head tags

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script>
$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#anchor');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
        document.getElementById('sticky').classList.add('sticky-top');
       } else {
        document.getElementById('sticky').classList.remove('sticky-top');
       }
   });
    }
});
</script>