欢迎来到福编程网,本站提供各种互联网专业知识!

javascript跟随滚动条滚动的层(浮动AD效果)

发布时间:2007-08-28 作者: 来源:转载
其实这个效果在很多网站中都能见到,其主要表现为网页两侧的浮动广告。看起来感觉很难做,但其实原理是很简单的,使用定时器没0.1秒检测层的位置并将其置在指定的位置(相对于窗口)。写了一个简单的代码:此广告位招租[Ctrl+A全选注:如需引入外部Js需刷新才
其实这个效果在很多网站中都能见到,其主要表现为网页两侧的浮动广告。看起来感觉很难做,但其实原理是很简单的,使用定时器没0.1秒检测层的位置并将其置在指定的位置(相对于窗口)。写了一个简单的代码:

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
注意:
if(window.innerHeight){
posX=window.pageXOffset;
posY=window.pageYOffset;
}
elseif(document.documentElement&&document.documentElement.scrollTop){
posX=document.documentElement.scrollLeft;
posY=document.documentElement.scrollTop;
}
elseif(document.body){
posX=document.body.scrollLeft;
posY=document.body.scrollTop;
}
这段代码是为了兼容标准,在xhtml页面中,document.body.scrollTop始终为0,即该属性无效,因此必须用其他的属性来判断,为兼容新旧标准,应该对属性的可用性进行判断。

引用网上的一段文字:

引用

应用WEB标准会使ScrollTop属性失效!!!
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

加上这段后,document.body.scrollTop永远等于0


bodyonscroll="alert(document.body.scrollTop);"永远也不会引发。


解决办法:

使用:

document.documentElement.scrollTop

示例一:

varscrollPos;
if(typeofwindow.pageYOffset!='undefined'){
scrollPos=window.pageYOffset;
}
elseif(typeofdocument.compatMode!='undefined'&&
document.compatMode!='BackCompat'){
scrollPos=document.documentElement.scrollTop;
}
elseif(typeofdocument.body!='undefined'){
scrollPos=document.body.scrollTop;
}
alert(scrollPos);


示例二:

functionWebForm_GetScrollX()
{
if(__nonMSDOMBrowser)
{
returnwindow.pageXOffset;
}
else
{
if(document.documentElement&&document.documentElement.scrollLeft)
{
returndocument.documentElement.scrollLeft;
}
elseif(document.body)
{
returndocument.body.scrollLeft;
}
}
return0;
}


-------------------------------------
pageYOffset是netscape的
document.body.scrollTop和document.documentElement.scrollTop是ie的,但我不知道他们的真正区别,只知道documentElement.scrollTop是xhtml兼容的(我用的是strict)

相关推荐