javascript - Bar that starts at the bottom of the page, scrolls up and then sticks to the top -

i trying reproduce idea had in mind. in 1 of long scrolling page.

the navigation bar start @ bottom of initial screen. once start scrolling down, scrolls @ same rhythm, once reaches top, stays fixed. if scroll top, goes down it's original position.

it this: http://codepen.io/chrissp26/pen/xeaqc stays fixed @ same number mark scroll, , sticks top, unless scroll number.

the sample code:

$(document).on("ready", function() {      sortthefooterout();    });    function sortthefooterout() {      footer = $("#footer");      $(window).on("scroll", function() {        if ($(window).scrolltop() > 0) {          if (!footer.hasclass("fixed")) {          footer.fadeout(250, function() {              footer.addclass("fixed").fadein(250);            });        }      } else {        footer.fadeout(250, function() {            footer.removeclass("fixed").fadein(250);          });      }      });  }

body {    font-family: "segoe ui", "dejavu sans", "trebuchet ms", verdana, sans-serif;  }  h1 {    font-family: "segoe ui light", "segoe ui", "dejavu sans", "trebuchet ms", verdana, sans-serif;    color: #999;    font-weight: normal;    margin: 0;  }  footer {    background: #008aca;    padding: 10px;    position: absolute;    bottom: 0;    left: 0;    right: 0;  }  .fixed {    position: fixed;    top: 0;    bottom: auto;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <h1>footer scroll</h1>  1  <br>2  <br>3  <br>4  <br>5  <br>6  <br>7  <br>8  <br>9  <br>10  <br>11  <br>12  <br>13  <br>14  <br>15  <br>16  <br>17  <br>18  <br>19  <br>20  <br>21  <br>22  <br>23  <br>24  <br>25  <br>26  <br>27  <br>28  <br>29  <br>30  <br>31  <br>32  <br>33  <br>34  <br>35  <br>36  <br>37  <br>38  <br>39  <br>40  <br>  <footer id="footer">footer</footer>

something this, guess?

demo

$(function() {  var gate = $(window), footer = $('#footer'), space;  gate.on('load resize', function() {      cleartimeout(redraw);      var redraw = settimeout(function() {     space = gate.height()-footer.outerheight();     sortthefooterout();     }, 150); }) .scroll(sortthefooterout);  function sortthefooterout() {      var current = gate.scrolltop(),     stuck = footer.hasclass('fixed');             if (current > space) {     if (!stuck) {     footer.addclass('fixed');     }     }     else if (stuck) footer.removeclass('fixed'); } }); 

added check apply class correctly when user lands on page when has cached scroll position. opera stubborn - repositions after window onload event, hence timeout. included resize debouncing. combined event timeout made bit longer absolutely necessary onload itself.

before try tackle issue of overlapping content mentioned rockmandew in comments, more info on exact document structure desirable. wouldn't want waste time there... or overdo on scripting.