(转)JS浮动窗口（随浏览器滚动而滚动）

时间：2021-11-26 15:18:24

JS浮动窗口（随浏览器滚动而滚动）

往往用于一些联系方式，互动平台模块，随着浏览器的滚动而滚动。

<div id="AdLayer">

<p>窗口中的内容</p>

</div>

放在<body>下面（页面最上面）

JS代码

window.onload=function(){

var n=0;//top值

var obj=document.getElementById("AdLayer"); //position:fixed对象

window.onscroll=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}

window.onresize=function(){obj.style.top=(document.body.scrollTop||document.documentElement.scrollTop)+n+'px';}

}

CSS代码:

#AdLayer { background:url(../images/gj_3.jpg) no-repeat top center;

right:0; top:0; width:80px; height:235px; position:absolute; padding-right:10px;padding-top:75px; text-align:center;margin-top:150px;}

CSS代码分析，背景图片，大小宽80，高235，浮动，靠右上，窗口的内容居中，与上的距离为75，窗口跟上的距离为150，当然，，代码可随你自己的意，

(转)JS浮动窗口（随浏览器滚动而滚动）的更多相关文章

  1. JS获取页面&comma;元素&comma;窗口和返回页面&comma;元素&comma;窗口的宽高以及滚动值

    jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...

  2. 【js】右下角浮动窗口

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  4. js实现图片向上播放（轮番滚动）

    js实现图片向上播放(轮番滚动) 实现方式,多种多样,这里我们来看javascript实现方式,重点是研究里面的源代码: 看看别人是如何写出“优雅的代码” <!DOCTYPE html PUBL ...

  5. js获取滚动条距离浏览器顶部&comma;底部的高度&comma;兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  6. JS关闭窗口或JS关闭页面的几种代码

    //JS定时自动关闭窗口 <script language="javascript"> <!-- function closewin(){ self.opener ...

  7. Extjs学习----------动态载入js文件（减轻浏览器的压力）

    动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...

  8. Jquery 类似新浪微博，鼠标移到头像，用浮动窗口显示用户信息，已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  9. 【Javascript】JS的异步操作，浏览器的多线程间的协作

    遇到的问题,引发了思考 今天看了一个例子,强烈引发了我对于浏览器多线程之间的操作机制.同步与异步.回调函数的兴致,代码如下: <html> <head> <title&g ...

随机推荐

  1. 浅析PHP中for与foreach两个循环结构遍历数组的区别

    遍历一个数组是编程中最常见不过的了,这里跟大家讨论下for和foreach两种方法.用这两种方法执行遍历的场景太多太多了,这里我们只针对以下两个数组作为例子来讨论.所谓管中窥豹,多少能理清一点两者的区 ...

  2. ServletRequest中getReader&lpar;&rpar;和getInputStream&lpar;&rpar;只能调用一次的解决办法

    转载:http://blog.sina.com.cn/s/blog_870cd7b90101fg58.html 最近使用spring mvc做项目,数据格式是json,有一个功能是实现记录请求的参数, ...

  3. 通过浏览器直接打开Android应用程序

    需求 通过手机浏览器直接打开Android应用程序.假设本地已经安装了指定Android应用,就直接打开它:假设没有安装,则直接下载该应用的安装文件(也能够跳转到下载页面). 实现效果 假设手机上已经 ...

  4. 在Eclipse中创建Django项目

    在以前的分享中,我们是在命令行模式下创建Django项目的,那么,如何在IDE中使用Django呢? 本文将介绍如何在Eclipse中创建Django项目. 首先,新建Django项目mysite,如 ...

  5. Nginx 磁盘IO的优化

    L:132

  6. 2018-01-06自定义view时遇到的问题

    1.设置蒙版的简单写法: 2.

  7. Qt5&period;3&period;2&lowbar;CentOS6&period;4&lowbar;x86&lowbar;编程调试环境【勿删，简洁】

    ZC:使用的虚拟机环境是:博客园VMwareSkill 的 “CentOS6.4x86EngCustomize120g__20160307.rar” 1. For Qt5.3.2: 基本需要的 软件包 ...

  8. Navicat &num;1045 - Access denied for user &&num;39&semi;root&&num;39&semi;&commat;&&num;39&semi;localhost&&num;39&semi; &lpar;using password&colon; NO&rpar;

    Navicat #1045 - Access denied for user 'root'@'localhost' (using password: YES) 出现上述问题,原因在于本机还开了APMS ...

  9. jquery实现高度的获取－位置函数

    一.位置函数 1.offset() 获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. 2.innerWidth() 获取第一个匹配元素内部区 ...

  10. php四种排序算法实现代码

    分享php排序的四种算法与代码. 冒泡:function bubble_sort($arr){ $num = count($arr); for($i=0;$i<$num;$i++){ for($ ...

相关文章