javascript跟隨滾動(dòng)條滾動(dòng)的層(浮動(dòng)AD效果)
更新時(shí)間：2007年08月28日 20:35:00 作者：
其實(shí)這個(gè)效果在很多網(wǎng)站中都能見到，其主要表現(xiàn)為網(wǎng)頁(yè)兩側(cè)的浮動(dòng)廣告?？雌饋砀杏X很難做，但其實(shí)原理是很簡(jiǎn)單的，使用定時(shí)器沒0.1秒檢測(cè)層的位置并將其置在指定的位置（相對(duì)于窗口）。寫了一個(gè)簡(jiǎn)單的代碼：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
注意：
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) {
posX = document.body.scrollLeft;
posY = document.body.scrollTop;
}
這段代碼是為了兼容標(biāo)準(zhǔn)，在xhtml頁(yè)面中，document.body.scrollTop始終為0，即該屬性無效，因此必須用其他的屬性來判斷，為兼容新舊標(biāo)準(zhǔn)，應(yīng)該對(duì)屬性的可用性進(jìn)行判斷。
引用網(wǎng)上的一段文字：
引用
應(yīng)用WEB標(biāo)準(zhǔn)會(huì)使ScrollTop屬性失效！?。?nbsp;
<!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">
加上這段后，document.body.scrollTop永遠(yuǎn)等于0
body onscroll = "alert(document.body.scrollTop);"永遠(yuǎn)也不會(huì)引發(fā)。
解決辦法：
使用：
document.documentElement.scrollTop
示例一：
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
alert(scrollPos);
示例二：
function WebForm_GetScrollX()
{
if (__nonMSDOMBrowser)
{
return window.pageXOffset;
}
else
{
if (document.documentElement && document.documentElement.scrollLeft)
{
return document.documentElement.scrollLeft;
}
else if (document.body)
{
return document.body.scrollLeft;
}
}
return 0;
}
-------------------------------------
pageYOffset是netscape的
document.body.scrollTop和document.documentElement.scrollTop是ie的，但我不知道他們的真正區(qū)別，只知道documentElement.scrollTop是xhtml兼容的（我用的是strict）
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
注意：
if (window.innerHeight) {
posX = window.pageXOffset;
posY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
posX = document.documentElement.scrollLeft;
posY = document.documentElement.scrollTop;
}
else if (document.body) {
posX = document.body.scrollLeft;
posY = document.body.scrollTop;
}
這段代碼是為了兼容標(biāo)準(zhǔn)，在xhtml頁(yè)面中，document.body.scrollTop始終為0，即該屬性無效，因此必須用其他的屬性來判斷，為兼容新舊標(biāo)準(zhǔn)，應(yīng)該對(duì)屬性的可用性進(jìn)行判斷。
引用網(wǎng)上的一段文字：
引用
應(yīng)用WEB標(biāo)準(zhǔn)會(huì)使ScrollTop屬性失效！?。?nbsp;
<!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">
加上這段后，document.body.scrollTop永遠(yuǎn)等于0
body onscroll = "alert(document.body.scrollTop);"永遠(yuǎn)也不會(huì)引發(fā)。
解決辦法：
使用：
document.documentElement.scrollTop
示例一：
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
alert(scrollPos);
示例二：
function WebForm_GetScrollX()
{
if (__nonMSDOMBrowser)
{
return window.pageXOffset;
}
else
{
if (document.documentElement && document.documentElement.scrollLeft)
{
return document.documentElement.scrollLeft;
}
else if (document.body)
{
return document.body.scrollLeft;
}
}
return 0;
}
-------------------------------------
pageYOffset是netscape的
document.body.scrollTop和document.documentElement.scrollTop是ie的，但我不知道他們的真正區(qū)別，只知道documentElement.scrollTop是xhtml兼容的（我用的是strict）
您可能感興趣的文章:
- 基于JS實(shí)現(xiàn)二維碼圖片固定在右下角某處并跟隨滾動(dòng)條滾動(dòng)
- javascript簡(jiǎn)單實(shí)現(xiàn)跟隨滾動(dòng)條漂浮的返回頂部按鈕效果
- 基于JavaScript實(shí)現(xiàn)div層跟隨滾動(dòng)條滑動(dòng)
- js 右側(cè)浮動(dòng)層效果實(shí)現(xiàn)代碼(跟隨滾動(dòng))
- js寫出遮罩層登陸框和對(duì)聯(lián)廣告并自動(dòng)跟隨滾動(dòng)條滾動(dòng)
- javascript跟隨滾動(dòng)效果插件代碼（javascript Follow Plugin）
- 博客側(cè)邊欄模塊跟隨滾動(dòng)條滑動(dòng)固定效果的實(shí)現(xiàn)方法(js+jquery等)
- xScrollStick 跟隨滾動(dòng)條漂浮的JS特效
- js跟隨滾動(dòng)條滾動(dòng)浮動(dòng)代碼
- JavaScript實(shí)現(xiàn)跟隨滾動(dòng)緩沖運(yùn)動(dòng)廣告框
相關(guān)文章
JavaScript實(shí)現(xiàn)視頻轉(zhuǎn)GIF的示例代碼
這篇文章主要介紹了JavaScript實(shí)現(xiàn)視頻轉(zhuǎn)GIF,本文一共會(huì)按照以下三步去實(shí)現(xiàn)一個(gè)視頻轉(zhuǎn)?GIF?功能,解封裝視頻,從視頻文件中獲取視頻幀,解碼視頻幀,獲取幀圖像信息,拼裝幀圖像信息,生成?GIF,需要的朋友可以參考下2024-03-03
JavaScript設(shè)計(jì)模式中的觀察者模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式中的觀察者模式，觀察者設(shè)計(jì)模式適用于監(jiān)聽一對(duì)多的操作，例如監(jiān)聽對(duì)象屬性的修改等等，觀察者模式能夠降低代碼耦合度，提升可擴(kuò)展性2022-06-06
javascript分頁(yè)代碼(當(dāng)前頁(yè)碼居中)
昨天看了妙味課堂的 分頁(yè)視頻教程，今天自己參照其思路，自己寫了下，并且自己新增了一個(gè)顯示頁(yè)碼個(gè)數(shù)的屬性 showPageNum2012-09-09
本文主要介紹了js對(duì)cookie的操作：js設(shè)置cookie；js獲取cookie；給cookie設(shè)置終止日期；刪除cookie 等，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
js事件冒泡實(shí)例：摘的網(wǎng)上的例子，但是他寫的有錯(cuò)誤，自己改正了下，已驗(yàn)證通過，感興趣的朋友可以參考下哈2013-04-04
javascript調(diào)試過程中找不到哪里出錯(cuò)的可能原因
本文為大家講解下在寫javascript時(shí)找不到哪里出錯(cuò)的可能原因，遇到的朋友可以參考下2013-12-12
當(dāng)某個(gè)元素，如：div，同時(shí)綁定了click事件和dblclick事件，而這兩個(gè)事件又要處理相對(duì)獨(dú)立的業(yè)務(wù)，也就是click的時(shí)候不能觸發(fā)dblclick，dblclick的時(shí)候不能觸發(fā)click2012-07-07
微信小程序：數(shù)據(jù)存儲(chǔ)、傳值、取值詳解
這篇文章主要介紹了微信小程序：數(shù)據(jù)存儲(chǔ)、傳值、取值，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
js記錄點(diǎn)擊某個(gè)按鈕的次數(shù)-刷新次數(shù)為初始狀態(tài)的實(shí)例
下面小編就為大家?guī)硪黄猨s記錄點(diǎn)擊某個(gè)按鈕的次數(shù)-刷新次數(shù)為初始狀態(tài)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
數(shù)組的去重方法,其實(shí)無論實(shí)在實(shí)際項(xiàng)目還是在面試中都會(huì)有用到的,下面這篇文章主要給大家介紹了非常全面的12種js數(shù)組去重的方法,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07