I've been trying like crazy to make this happen but I just can't figure it out ( beginner ).

As you can see, when you scroll down, the top head part will stick to the top of the page but also overflow a bit. This is done with stickyjs. I want to do the same thing with the bottom of the head as well, after scrolling a bit for it to "sink" a few pixels while sticking to the bottom of the page, so there's more visibility, but no matter what I try, it just won't work. 

If anyone could help, I'd be thankful.

Here's the code on the top part: 

```
#head {
    z-index:101;
    display: block;
    position: absolute; 
    bottom: 20%;
    width:100%;
    margin:0 auto;
    right:0;
    left:0;
    height:85px;
    background: url(../float.png) #fff 50% 50% no-repeat;
    text-indent:-9999px;
    overflow:hidden;
}

```

Here's the code for the bottom part:

```
#footerhead {
    z-index:100;
    position:fixed;
    left:0px;
    bottom:0px;
    margin:0 auto;
    height:20%;
    width:100%;
    background:url(../footer.png) #fff  50% 0  no-repeat;
}

```

And here's the stickyjs that makes it stick:

```
<script>
    $(document).ready(function(){
        $("#head").sticky({topSpacing:-70});
    });
</script>

```

Please help me out. :(