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

VirginiaIris · 发布于 2017-01-11 · 字数3809 · 浏览 772 · 评论 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 授权问说网发表,并经问说网编辑,转载请注明出处和 本文链接

相关文章

  • 2016-12-02FlyJSONP轻量级的跨域AJAX请求插件
  • 2016-04-25BlackAndWhite把图片转成黑白效果jQuery插件
  • 2016-05-11WordPress实现HTML5预加载
  • 2016-05-14如果H5不火了,微信死了,活下来的会是什么?
  • 2016-12-02Response JS创建高性能的支持移动设备的网站
  • 2016-05-16色彩潮流抢先看!2015年网页设计配色新趋势
  • 2016-05-23Photoshop绘制一枚通透质感的游戏按钮
  • 2016-06-06JavaScript数组元素的排序及洗牌算法
  • 发布评论

    为您推荐

    设计趋势抢先看!2015年网页设计10大新趋势

    金秋十月,又是一年收获的季节。转眼间我们将要和2014告别,2014,你收获了什么?到目前为止,我们已经看到一些设计趋势在发生。现在,我们来预测一下2015年的…

    • 设计趋势抢先看!2015年网页设计10大新趋势
    • 设计趋势抢先看!2015年网页设计10大新趋势
    • 设计趋势抢先看!2015年网页设计10大新趋势
    • 设计趋势抢先看!2015年网页设计10大新趋势
    SamPolly · 发布于 2016-05-14 · 浏览 884 · 评论 0
    问说网 · 发布于 2016-06-06

    PHP遍历目录的三种方法

    我们有时候需要读取目录里面的内容,在PHP有多个函数可以获取文件系统目录信息,今天就给大家分享PHP遍历目录的三种方法,对于上面提到的3个函数,对执行速度没有做…

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

    Apache使用mod_bandwidth模块限制下载速度

    现在的服务器一般都是是100M光钎接入,但是这个并不是我们平时所说的下载速度,例如问说网的服务器带宽为1Mbps,咋一看有1M的下载速度,其实只有128KB/S…

    分享20款优秀的Web移动开发框架
    问说网 · 发布于 2016-06-25

    分享20款优秀的Web移动开发框架

    移动开发框架可以帮助开发者快速开发出满足需求的Web移动应用和网站,本文收集了20款针对开发者的移动开发框架,供开发者借鉴使用。

    Java初识

    版本体系 JavaSE Java 2 Platform, J2SE, Standard Edition,标准版, 主要用于桌面应用软件的编程, 包含那些构成Ja…

    • Java初识
    • Java初识
    • Java初识
    • Java初识
    Vincent · 发布于 2016-07-06 · 浏览 968 · 评论 0
    Vincent · 发布于 2016-07-06

    Java中面向对象的封装和继承以及多态

    封装 封装是指,一种将抽象性函式接口的实作细节部份包装、隐藏起来的方法,封装可以被认为是一个保护屏障,防止该类的代码和数据被外部类定义的代码随机访问 java的…

    Vincent · 发布于 2016-07-06

    正则表达式

    包 java.uti.regex   类 Pattern 正则表达式的编译表示形式 Matcher 通过解释 Pattern 对 character …

    Vincent · 发布于 2016-07-06

    Spring MVC文件上传

    1.    文件配置 SpringMVC 用的是 的MultipartFile来进行文件上传 所以我们首先要配置MultipartResolver来明确告诉Di…

    问说网手机版

    躺着 站着 跪着轻松访问

    更多详情 关于作者

    VirginiaIris

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

    90 文章
    0 评论
    人气

    更多 热门话题

    APP界面

    关注 APP界面

    文章 41506 · 浏览 1914

    APP欣赏

    关注 APP欣赏

    文章 41427 · 浏览 1837

    APP手机界面

    关注 APP手机界面

    文章 41417 · 浏览 1851

    图片素材

    关注 图片素材

    文章 29463 · 浏览 1328

    高清图片

    关注 高清图片

    文章 26530 · 浏览 1539

    更多 推荐作者

    关注 秋末残雪

    文章 106 · 评论 0

    关注 秋天的孤寂

    文章 99 · 评论 0

    关注 倾听寂寞

    文章 83 · 评论 0

    关注 籹孒不认输

    文章 94 · 评论 0

    关注 思念像咒语

    文章 102 · 评论 0

    关注 呼吸快窒息

    文章 104 · 评论 0

    顶部 反馈 评论 底部

    意见反馈

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

    您的反馈我们已收到!

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