Навигация исправлена ​​в нижней части и после прокрутки становится липким

Question

Я хотел бы (в начале страницы) иметь навигацию внизу экрана. После этого, когда мы прокручиваем, навигация будет привязана к верхней части страницы (с путевыми точками). Если я поставлю свою навигацию относительно, она работает, но с фиксированной она не работает. Извините за мой плохой английский, спасибо.

  <style>
  #social-float {
    position: fixed;
    bottom: 0px;
    width: 55px;
  }
  #footer { height: 235em; background: #888; }
  #background {
    background: url(images/background.jpg) no-repeat top center fixed; 
    background-size: 100% 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

  }
</style>
<link rel="stylesheet" href="css/css.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-sticky.min.js"></script>

  <script>function checkOffset() {
      var a=$(document).scrollTop()+window.innerHeight;
  var b=$('#footer').offset().top;
  if (a<b) {
    $('#social-float').css('bottom', '10px');
  } else {
    $('#social-float').css('bottom', (10+(a-b))+'px');
  }
}
  $('.my-sticky-element').waypoint('sticky');
  </script>

<div id="background" style="height:1000px">
  long content sample
</div>
<div id="social-float" class="my-sticky-element">
    <ul id="nav">
      <li><a href="#a">One</a></li>
      <li><a href="#b">two</a></li>
      <li><a href="#c">three</a></li>
    </ul>
</div>
<div id="footer">
  footer sample
</div>

Answer 1

Это был бы мой подход:

CSS

#social-flat {
  position:fixed;
  bottom:0;
  width:100%;
}

#social-flat.top {
  bottom:inherit;
  top:0;
}

JS:

jQuery.fn.extend({
  moveFooterNav: function(){
    var that = $(this);
    var fixNav = $("#social-flat");
    var navPos = fixNav.offset;
    that.on({
       scroll:function(){
         var winPos = window.pageYOffset;
         if(winPos > navPos.top){
           fixNav.addClass("top");
         } else {
           fixNav.removeClass("top");
         }
       }
    });
  }
});

$(window).moveFooterNav();

извините, компания блокирует jsFiddle, поэтому я не могу на него ссылаться.