在页面内, 滑块位置的控制

要求:
1. 页面分三部, head, content, foot, 另外有浮动的滑块
2. 当前窗口处在content时, 滑块固定在最底部
3. 当滚动条滑到foot出现时, 滑块固定在content的最底部
4. 当滚动条往上滑动, 滑至head+滑块的高度时, 滑块固定在content的顶部

var $block = $('#block');
var $doc = $(document);
var $body = $(document.body);
var $win = $(window);
var $foot = $('#foot');
var $cont = $('#content');

//这是一个从底部向上计算的过程, 算出的值都跟scrollTop有关
var handle = function(){
  var st = $doc.scrollTop();
  //整个文档高度 - 当前窗口高度 - #foot高度 ==>(foot顶部正好在浏览器的底部)
  var h1 = $body.height() - $win.height() - $foot.height();
  //h1 - #content的高度 + #block的高度 ==>(block底部正好在浏览器的底部)
  var h2 = h1 - $cont.height() + $block.height();
  //当foot从窗口底部逐渐出现时
  if( st >= h1 ){
    $block.removeAttr('style').css({'position' : 'absolute'});
  //当窗口高度小于等于 block高度+head高度时 且 滚动条位置小于它们的高度时
  }else if( h2 > 0 && st <= h2){
    $block.css({'position' : 'absolute', 'top': 0});
  //中间位置
  } else {
    $block.removeAttr('style').css({'position' : 'fixed'});
  }
};
$win.scroll(handle);
$win.resize(handle);

在线DEMO: http://output.jsbin.com/jakusekayi