實現方法：
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>浮動廣告</title>
<style type="text/css">
#qqonline{
background-color:red;
border: 1px solid #fcc;
position:absolute;
top:100px;
left:16px;
width:100px;
height:120px;
}
#qqonline1{
background-color:red;
border: 1px solid #fcc;
position:absolute;
top:100px;
right:16px;
width:100px;
height:120px;
}
</style>
<script src="../js/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(this).scroll(function() { // 頁面發生scroll事件時觸發
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}
$("#qqonline").css("top", 100 + bodyTop) // 設置層的CSS樣式中的top屬性, 注意要是小寫，要符合“標準”
$("#qqonline").text(bodyTop); // 設置層的內容，這里只是顯示當前的scrollTop
$("#qqonline1").css("top", 100 + bodyTop)
$("#qqonline1").text(bodyTop);
});
</script>
</head>
<body style="height:1800px"><!-- 給BODY加個樣式，讓頁面出現滾動條 -->
<form id="form1" runat="server">
</form>
<div id="qqonline">
QQ在線服務
</div>
<div id="qqonline1">
QQfsdf在線服務
</div>
</body>
</html>
基于jquery的 浮動廣告 控制代碼
最近接觸jquery,學了點皮毛,為了滿足boss的需求弄了個相對屏幕靜止的浮動層,把代碼記在這里,以防自己以后用到
下面是jquery代碼,需要jquery類庫的支持才能運行,我寫文章的時候jquery的版本是1.3.2,不保證其他的版本能完美運行,代碼的基本原理寫在注釋里,如果你看不懂,那么你需要補充javascript和jquery的基本知識,不用太多,因為我寫這個的時候也不會什么....
$(document).ready(function(){
$(window).scroll( function() { //這個函數可以監視瀏覽器滾動條,只要滾動條一移動,此函數就觸發
var diffY = $(window).scrollTop();//頁面現在的位置和滾動條頂端的距離[scrollTop()]
var diffH = $(window).height()/4;//設計者期望的浮動欄與瀏覽器頂端的距離[height()],這里是與瀏覽器頂端保持1/4個頁面的高度,如果diffH的值設置成0,浮動欄就會落在屏幕頂端
var percent=diffY+diffH; //percent將被賦值給css中的"top"屬性,作為浮動欄的新高度值
if(percent<0){ //判斷percent的值是否小于0,小于0就湊整,大于0就忽略小數部分
