悬浮窗口 onscroll实现

来源：互联网发布：软件测试职业学校编辑：程序博客网时间：2024/04/30 21:07

下面的代码

两种情况基于标准不一样

1.按 <!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"> 代码就是下面

<!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"><head runat="server">    <title>测试 悬乎窗口</title>    <script type="text/javascript">            window.onscroll = function () {                var div = document.getElementById("demo");                //div.style.top = document.body.scrollTop>0?document.body.scrollTop:document.documentElement.scrollTop+300+"px";//滑动的时候离头部300px                div.style.top = document.body.scrollTop>0?document.body.scrollTop:document.documentElement.scrollTop;            }                     </script></head><body>    <div id="demo" style="position: absolute; color: #cccccc; width: 150px; height: 30px;        background-color:#000">        这是悬浮窗口    </div>    <div style="height: 1000px; width: 200px; background-color: #cccccc">    </div></body></html>

2.按另外一种的话

代码如下：

<head runat="server">    <title>测试 悬乎窗口</title>    <script type="text/javascript">            window.onscroll = function () {                var div = document.getElementById("demo");                          div.style.top = document.body.scrollTop;            }                     </script></head><body>    <div id="demo" style="position: absolute; color: #cccccc; width: 150px; height: 30px;        background-color: #000">        这是悬浮窗口    </div>    <div style="height: 1000px; width: 200px; background-color: #cccccc">    </div></body></html>