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

VirginiaIris · 发布于 2017-01-11 · 字数3809 · 浏览 796 · 评论 0

其实这个效果在很多网站中都能见到,其主要表现为网页两侧的浮动广告。看起来感觉很难做,但其实原理是很简单的,使用定时器没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)

本文系作者 VirginiaIris 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2017-01-19用JavaScript实现给出的盒子的序列是否可连为一矩型
  • 2016-03-08Jsoup功能强大的JavaHTML解析器
  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-03-11SQLite数据库页面结构分析
  • 2016-03-11循环数组无锁队列的实现
  • 2016-05-17干货分享YY语音移动端UI设计规范高清下载
  • 2016-06-06JavaScript中使用ID获取节点的思考
  • 2016-07-06Oracle(ALL | DBA | USER)
  • 发布评论

    为您推荐

    使用Media Object可以节省几百行代码
    问说网 · 发布于 2015-06-24

    使用Media Object可以节省几百行代码

    什么是当前互联网的设计,至少UI层就是有Media Object构成,当我谈到Facebook stream story的时候,在大多数情况下,stream s…

    用JavaScript实现给出的盒子的序列是否可连为一矩型
    AustenJuliet · 发布于 2017-01-19

    用JavaScript实现给出的盒子的序列是否可连为一矩型

    by cpglkg <script>var arr=[5,10,15];function rect(arr,width){ arr.sort(fun…

    有限状态机FSM的设计算法与实现代码
    问说网 · 发布于 2016-03-10

    有限状态机FSM的设计算法与实现代码

    通过分层状态机的设计,各个功能实体维护自身的强相关的一套状态机,可以有效的减小状态机的复杂度,通过构建公共流程状态机,可以减小规模。在针对规模较大、流程复杂的状…

    问说网 · 发布于 2016-12-02

    Response JS创建高性能的支持移动设备的网站

    Response JS 是一个轻量级的 jQuery 插件,用来创建高性能的支持移动设备的网站。它提供了一套语法用来根据不同的设备环境动态替换HTML代码。例如…

    致爱学习的你!给网页设计新手的10条实用法则

    每个设计师朋友应该都有过这样的经历,新手时期常苦于没有师傅手把手教,现在机会来了,CYHD今天给大家带来了网页UI设计的10条实用法则,非常适合正在学习进步的新…

    • 致爱学习的你!给网页设计新手的10条实用法则
    • 致爱学习的你!给网页设计新手的10条实用法则
    • 致爱学习的你!给网页设计新手的10条实用法则
    • 致爱学习的你!给网页设计新手的10条实用法则
    JonahJocelyn · 发布于 2016-05-16 · 浏览 906 · 评论 0

    芒果图标psd绘制教程

    芒果细节部分较少,制作过程也比较简单。先找一幅较为完好的芒果实物图作为参考,然后找出暗部及高光部分,再慢慢渲染即可。 最终效果 1、新建一个800 * 600像…

    • 芒果图标psd绘制教程
    • 芒果图标psd绘制教程
    • 芒果图标psd绘制教程
    • 芒果图标psd绘制教程
    BillyAsa · 发布于 2016-05-17 · 浏览 975 · 评论 0
    问说网 · 发布于 2016-06-02

    C语言Side effect和Sequence point副作用

    访问易变对象,修改对象或文件,或者调用包含这些操作的函数都是副作用,它们都会改变执行环境的状态。计算表达式也会引起副作用。

    问说网 · 发布于 2016-06-30

    io.js衍生自Node.js并兼容npm的开发平台

    io.js 是一个衍生自 Node.js™,并兼容 npm 的开发平台,io.js与Node.js项目再次合并,不会有任何进一步的io.js释放。在io.js所…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    VirginiaIris

    这个人比较懒,什么都没有填写!

    90 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 2561

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 2416

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 2463

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1949

    高清图片

    关注 高清图片

    文章 26530 · 浏览 2130

    更多 推荐作者

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 怎麽继续

    文章 90 · 评论 2

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 走了留下什么

    文章 110 · 评论 0

    关注 莪很迷茫

    文章 97 · 评论 0

    关注 流浪的脚步

    文章 86 · 评论 0

    
    顶部 反馈 评论 底部

    意见反馈

    感谢您对问说网的支持,提出您在使用过程中遇到的问题或宝贵建议,您的反馈对我们产品的完善有很大帮助。

    您的反馈我们已收到!

    感谢您提供的宝贵意见,我们会在1-2个工作日,通过您留下的联系方式将处理结果反馈给您!