大多數(shù)網(wǎng)站都有左右兩邊的固定廣告位，下面呢就是實(shí)現(xiàn)這個(gè)效果的最簡(jiǎn)單的代碼，可能在ie下滾動(dòng)的時(shí)候會(huì)有一點(diǎn)抖動(dòng)，這個(gè)問(wèn)題以后再解決了，先實(shí)現(xiàn)再說(shuō)。

要點(diǎn)一：

var adtop = adleft.offsetTop;

獲得元素距離上邊的位置，在滾動(dòng)的時(shí)候需要用到。

要點(diǎn)二：

復(fù)制代碼代碼如下:

adleft.style.top=adtop+(document.documentElement.scrollTop || document.body.scrollTop)+"px";

滾動(dòng)時(shí)，給元素的上邊位置賦值為元素本身距離上邊的距離加上滾動(dòng)的距離。

上代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>無(wú)標(biāo)題文檔</title>
<style>
body{margin:0; padding:0}
#adleft,#adright{
width:30px;
height:100px;
padding:20px;
font:14px/20px arial;
text-align:center;
background:#06c;
position:absolute;
cursor:pointer;
color:#fff
}
#adleft{left:0; top:150px; }
#adright{right:0; top:150px;}
</style>
<script>
window.onload = function(){
 var adleft = document.getElementById("adleft");
 var adright = document.getElementById("adright");
 var adtop = adleft.offsetTop;
 window.onscroll = function(){
  adleft.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 
  adright.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 
 }
} 
</script>
</head>
<body style="height:2000px;">
<h1>左右廣告</h1>
<div id="adleft">左邊廣告</div>
<div id="adright">右邊廣告</div>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

js
廣告

相關(guān)文章

Bootstrap的class樣式小結(jié)
本文給大家總結(jié)了bootstrap的class樣式，由基礎(chǔ)到內(nèi)涵給大家介紹的非常詳細(xì)，需要的的朋友可以參考下
2016-12-12
JavaScript中join()、splice()、slice()和split()函數(shù)用法示例
這篇文章主要介紹了JavaScript中join()、splice()、slice()和split()函數(shù)用法,結(jié)合實(shí)例形式較為詳細(xì)的分析了join()、splice()、slice()和split()函數(shù)的功能、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2018-08-08
onmouseover事件和onmouseout事件全面理解
最近兩天在溫習(xí)onmouseover事件和onmouseout事件，其實(shí)里面有很多深?yuàn)W的知識(shí)，接下來(lái)小編給大家?guī)?lái)了onmouseover事件和onmouseout事件全面了解，感興趣的朋友一起看下
2016-08-08
移動(dòng)端觸摸滑動(dòng)插件swiper使用方法詳解
這篇文章主要為大家詳細(xì)介紹了移動(dòng)端觸摸滑動(dòng)插件swiper的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-08-08
bootstrap datepicker的基本使用教程
這篇文章主要介紹了bootstrap datepicker的基本使用教程,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-07-07
JavaScript中日期函數(shù)的相關(guān)操作知識(shí)
日期函數(shù)是我們經(jīng)常用到的知識(shí)點(diǎn)，下面通過(guò)本文給大家介紹JavaScript中日期函數(shù)的相關(guān)操作知識(shí)，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧
2016-08-08
JS簡(jiǎn)單編號(hào)生成器實(shí)現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS簡(jiǎn)單編號(hào)生成器實(shí)現(xiàn)方法,涉及JavaScript針對(duì)表單與字符串操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2016-04-04
計(jì)算100000數(shù)組js腳本的執(zhí)行時(shí)間
計(jì)算100000數(shù)組js腳本的執(zhí)行時(shí)間...
2006-10-10
Js判斷參數(shù)(String,Array,Object)是否為undefined或者值為空
在一些前端控件要提交數(shù)據(jù)到服務(wù)器端的數(shù)據(jù)驗(yàn)證過(guò)程中，需要判斷提交的數(shù)據(jù)是否為空。如果是普通表單的字符串?dāng)?shù)據(jù)，只需要在 trim 后判斷 length 即可，而這里需要的數(shù)據(jù)可以是各種不同的類(lèi)型，通過(guò) JSON.stringify(data) 進(jìn)行序列化后再傳遞
2013-11-11
JS實(shí)現(xiàn)簡(jiǎn)單控制視頻播放倍速的實(shí)例代碼
這篇文章主要介紹了通過(guò)JS來(lái)實(shí)現(xiàn)簡(jiǎn)單控制視頻播放倍速,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04