javascript跟随滚动条滚动的层(浮动AD效果)
更新时间：2007年08月28日 20:35:00 作者：
其实这个效果在很多网站中都能见到，其主要表现为网页两侧的浮动广告。看起来感觉很难做，但其实原理是很简单的，使用定时器没0.1秒检测层的位置并将其置在指定的位置（相对于窗口）。写了一个简单的代码：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
注意：
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，即该属性无效，因此必须用其他的属性来判断，为兼容新旧标准，应该对属性的可用性进行判断。
引用网上的一段文字：
引用
应用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);"永远也不会引发。
解决办法：
使用：
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的，但我不知道他们的真正区别，只知道documentElement.scrollTop是xhtml兼容的（我用的是strict）
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
注意：
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，即该属性无效，因此必须用其他的属性来判断，为兼容新旧标准，应该对属性的可用性进行判断。
引用网上的一段文字：
引用
应用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);"永远也不会引发。
解决办法：
使用：
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的，但我不知道他们的真正区别，只知道documentElement.scrollTop是xhtml兼容的（我用的是strict）
相关文章
这篇文章主要介绍了JavaScript实现视频转GIF,本文一共会按照以下三步去实现一个视频转 GIF 功能,解封装视频,从视频文件中获取视频帧,解码视频帧,获取帧图像信息,拼装帧图像信息,生成 GIF,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了JavaScript设计模式中的观察者模式，观察者设计模式适用于监听一对多的操作，例如监听对象属性的修改等等，观察者模式能够降低代码耦合度，提升可扩展性2022-06-06
昨天看了妙味课堂的 分页视频教程，今天自己参照其思路，自己写了下，并且自己新增了一个显示页码个数的属性 showPageNum2012-09-09
本文主要介绍了js对cookie的操作：js设置cookie；js获取cookie；给cookie设置终止日期；删除cookie 等，具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
js事件冒泡实例：摘的网上的例子，但是他写的有错误，自己改正了下，已验证通过，感兴趣的朋友可以参考下哈2013-04-04
本文为大家讲解下在写javascript时找不到哪里出错的可能原因，遇到的朋友可以参考下2013-12-12
当某个元素，如：div，同时绑定了click事件和dblclick事件，而这两个事件又要处理相对独立的业务，也就是click的时候不能触发dblclick，dblclick的时候不能触发click2012-07-07
这篇文章主要介绍了微信小程序：数据存储、传值、取值，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
下面小编就为大家带来一篇js记录点击某个按钮的次数-刷新次数为初始状态的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
数组的去重方法,其实无论实在实际项目还是在面试中都会有用到的,下面这篇文章主要给大家介绍了非常全面的12种js数组去重的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
最新评论