博文发布到首页测试

HTML代码：

<div id="header">header</div>
  <div id="sidebarWrap">
  <div id="sidebar">Sidebar</div>
</div>
<div id="main">Main</div>
<div id="footer">footer</div>

CSS代码：

<style>
body {
  margin: 10px auto;
  font-family: sans-serif;
  width: 500px;
}

div {
  border-radius: 5px;
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3);
  border: 1px solid #ccc;
  padding: 5px;
}

#sidebarWrap {
  height: 400px;
  width: 210px;
  float: right;
  position: relative;
  box-shadow: none;
  border: none;
  margin: 0;
  padding: 0;
}

#main {
  width: 270px;
  height: 4000px;
}

#footer {
  clear: both;
  margin: 10px 0;
}

#sidebar {
  width: 200px;
  height: 300px;
  position: absolute;
}

#header {
  height: 200px;
  margin-bottom: 10px;
}

#sidebar.fixed {
  position: fixed;
  top: 0;
}

#footer {
  height: 600px;
}

#footer {
  height: 600px;
}
</style>

学习平时的知识，只是近来学习一点点，测试博文发布到首页。学习平时的知识，只是近来学习一点点，测试博文发布到首页。学习平时的知识，只是近来学习一点点，测试博文发布到首页。学习平时的知识，只是近来学习一点点，测试博文发布到首页。学习平时的知识，只是近来学习一点点，测试博文发布到首页。学习平时的知识，只是近来学习一点点，测试博文发布到首页。学习平时的知识，只是近来学习一点点，测试博文发布到首页。
jQuery代码：

<script>
$(function() {
  var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
  var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));

  var maxY = footTop - $('#sidebar').outerHeight();
			
  $(window).scroll(function(evt) {
    var y = $(this).scrollTop();
    if (y > top) {
      if (y < maxY) {
	$('#sidebar').addClass('fixed').removeAttr('style');
      } else {
	$('#sidebar').removeClass('fixed').css({
	  position: 'absolute',
	  top: (maxY - top) + 'px'
	});
      }
    } else {
      $('#sidebar').removeClass('fixed');
    }
  });
});
</script>

原文地址：http://www.cnblogs.com/songyan/p/16911538.html