本文介绍了使用纯CSS、原生JavaScript以及jQuery库实现页面滚动广告或固定定位的几种常见方案。重点讲解了CSS3中position:fixed属性的应用及其在Firefox和IE7中的支持情况，同时提供了针对IE6浏览器的复杂兼容代码。此外，还展示了基于原生JS的滚动监听逻辑以及利用jQuery库优化滚动效果的实现方式，供开发者根据项目需求选择。
当触发JavaScript的scroll事件时，有时会发现页面元素实际上并未随滚动条移动，这种现象并非仅存在于Firefox浏览器中，在IE6和IE7中同样会出现类似效果，这确实令人感到意外。
纯CSS实现滚动定位方案
为此，整理出一种仅通过CSS即可实现滚动跟随效果的代码方案。
#fixed{position:fixed;}
<div id="fixed">滚动</div>
仅需上述CSS属性即可实现固定定位效果，虽然简单但功能强大。需要注意的是，该方案主要支持Firefox和IE7浏览器；前文提到的IE6虽然也能实现类似效果，但实现过程相对复杂。
具体代码如下：
<!--[if IE]>
<style type="text/css">
* html #fixed{position:absolute;right:1px;top:expression_r(eval_r(document.body.height + 500));}
* html{overflow:hidden;}
* html body{height:100%;overflow:auto;}
* html #fixed{right:17px;top:5em;}
* html #fixed{right :1px;top :expression_r(eval_r(document.body.height + 500));}
</style>
<![endif]-->这段代码的具体含义尚不完全清楚，虽然属于CSS范畴，但其中似乎包含了脚本逻辑。如果有了解其原理的读者，欢迎分享交流。
原生JavaScript实现滚动逻辑
既然标题提及实现滚动的多种方法，显然不止上述两种。CSS还有其他写法，此处不再一一列举，主要介绍较为常用的JavaScript实现方式。我的网站曾使用一段网络代码，其不足之处在于它是相对于页面顶部的，如果网页高度不足，可能导致无法滚动到底部，百度留言板也有类似现象。以下先展示该代码供参考：
具体代码如下：
lastScrollY=0;
function heartBeat(){
var diffY;
if (document.documentElement && document.documentElement.scrollTop)
diffY = document.documentElement.scrollTop;
else if (document.body)
diffY = document.body.scrollTop
else
{}
percent=.1*(diffY-lastScrollY);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);
document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";
(document.getElementById("lovexin12").style.top)+percent+"px";
lastScrollY=lastScrollY+percent;
}
window.setInterval("heartBeat()",1);有兴趣的读者可以尝试将其修改为相对于底部定位，这样体验可能会更好。
基于jQuery的滚动实现
近期一直在研究JS库，对jQuery比较感兴趣，因此再提供一个使用jQuery实现滚动效果的代码，相比前一种方式感觉更为流畅。这仅是一种可选方案，若无需使用jQuery库，考虑到其代码体积（几十KB），可不采用。
具体代码如下：
$(document).ready(function(){
if($.browser.msie && $.browser.version == 6) {
FollowDiv.follow();
}
});
FollowDiv = {
follow : function(){
$('#cssrain').css('position','absolute');
$(window).scroll(function(){
var f_top = $(window).scrollTop() + $(window).height() - $("#cssrain").height() - parseFloat($("#cssrain").css("borderTopWidth")) - parseFloat($("#cssrain").css("borderBottomWidth"));
$('#cssrain').css( 'top' , f_top );
});
}
} 至此介绍完毕，如有不明之处欢迎提出讨论，共同进步。欢迎加入QQ群：5678537，共同学习。