页面滚动固定

实例代码：

 1 $(document).scroll(function () {
 2 
 3         var $leftBox = $('.lFixedBlock'),
 4                 $rightBox = $('.rFixedBlock'),
 5                 leftBoxHeight = $leftBox.height(),
 6                 rightBoxHeight = $rightBox.height(),
 7                 windowHeight = $(window).height(),
 8                 scrollTop = $(document).scrollTop(),
 9                 diffHeight = leftBoxHeight - rightBoxHeight;
10         if (diffHeight > 0) {
11             if ((scrollTop + windowHeight) > (leftBoxHeight + $leftBox.offset().top)) {
12                 $rightBox.css({'position': 'fixed', 'bottom': (scrollTop + windowHeight) - (leftBoxHeight + $leftBox.offset().top)});
13             } else if ((scrollTop + windowHeight) > (rightBoxHeight + $leftBox.offset().top)) {
14                 $rightBox.css({'position': 'fixed', 'bottom': 0});
15             } else {
16                 $rightBox.css({'position': 'static', 'bottom': 'auto'});
17             }
18         } else {
19             if ((scrollTop + windowHeight) > (rightBoxHeight + $rightBox.offset().top)) {
20                 $leftBox.css({'position': 'fixed', 'bottom': (scrollTop + windowHeight) - (rightBoxHeight + $rightBox.offset().top)});
21             } else if ((scrollTop + windowHeight) > (leftBoxHeight + $rightBox.offset().top)) {
22                 $leftBox.css({'position': 'fixed', 'bottom': 0});
23             } else {
24                 $leftBox.css({'position': 'static', 'bottom': 'auto'});
25             }
26         }
27 
28     });

 

posted @ 2014-01-03 14:54  幻星宇  阅读(223)  评论(0)  编辑  收藏  举报