jQuery Page Widget How to - Hide footer and scroll to see the footer

Question

We would like to know how to hide footer and scroll to see the footer.

Answer


<html>
  <head>
    <style>
      #social-float {
        position: fixed;
        bottom: 10px;
        left: 10px;
        width: 55px;
        padding: 10px 5px;
        text-align: center;<!--from   ww w . j  a  v a  2s. c o m-->
        background-color: #fff;
        border: 5px solid #ccd0d5;
        border-radius: 2px;
      }
      #footer { height: 5em; background: #888; }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.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');
        }
      }
      $(document).ready(checkOffset);
      $(document).scroll(checkOffset);
    </script>
  </head>
  <body>
    <div style="height:1000px">long content sample</div>
    <div id="social-float">
        <div class="sf-twitter">twitter</div>
        <div class="sf-facebook">facebook</div>
        <div class="sf-plusone">plusone</div>
    </div>
    <div id="footer">footer sample</div>
  </body>
</html>

The code above is rendered as follows: