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