Stick/Unstick an element based on page scroll

Question

Am using https://github.com/garand/sticky to stick an element to the top of the screen on page scroll. It works pretty well but am trying to use it's $("#sticker").unstick(); feature to unstick the same element when I reach a certain portion of the page.

How can I achieve this?

Here is what I have done so far;

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="url/sticky.min.js"></script>
<script>
    $(document).ready(function(){
    $(".banner").sticky({topSpacing:60});
    $(".banner").unstick();
 });
</script>

<div class="banner"><img src="addresstoimage.jpg"></div>

Answer 1

The sticky plugin will automatically stick and unstick for you.

You need to set both: the topSpacing and bottomSpacing parameters and your element will be sticky in between those two positions.

$(document).ready(function() {
    $(".banner").sticky(
        {
            topSpacing: 60,
            bottomSpacing: 100
        });
});