1.目标效果
现在各大网站常常使用固定边栏滚动特效,即页面内容较长时,边栏先随着页面向下滚动,当边栏滚动到底时,则不会随着页面的滚动而滚动,而是固定在页面上保持不动。
2.实现思路
1)设计好页面布局,页面向左浮动,边栏向右浮动。
2)当滚动高度加上页面高度大于侧边栏的高度时,应设置侧边栏的position为fixed,否则就将position变回static。
3.代码实现
1)jquery代码部分
<script>
var jWindow = $(window);
jWindow.scroll(function(){
var scrollHeight = jWindow.scrollTop();
var screenHeight = jWindow.height();
var sideHeight = $("#sideHeight").height();
if(scrollHeight + screenHeight>