滚动固定元素布局-优快云博客

本文介绍了一种使用jQuery实现的布局方案，在页面滚动时保持两个区块的相对位置不变。通过监听文档滚动事件，调整区块的位置属性，使区块能够在特定条件下固定在视口底部。

实例代码：

 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     });