悬浮窗口随滚动条的变化改变

最新推荐文章于 2021-06-03 13:08:34 发布

yingzi1202

最新推荐文章于 2021-06-03 13:08:34 发布

阅读量869

点赞数

本文链接：https://blog.csdn.net/yingzi1202/article/details/9342905

版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<LINK
href="dip.css" type=text/css rel=stylesheet>
<style type="text/css">

</style>
</head>

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<DIV id=STATICMENU
            style="Z-INDEX: 999; LEFT: 880px; VISIBILITY: visible; WIDTH: 76px; POSITION: absolute; TOP: 274px; HEIGHT: 203px">
<table width="100" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="3"><img src="images/QQ_3.gif" width="106" height="71" border="0" usemap="#Map" onClick="closead();" ></td>
    </tr>
    <tr>
      <td width="4" height="78" background="images/QQ_8.gif"></td>
      <td width="98" align="center"><table width="100%" cellspacing="0" cellpadding="3">
        <tr>
          <td width="36%"><div align="center"><img src="images/QQ.gif" width="16" height="17"></div></td>
          <td width="64%"><a href="http://wpa.qq.com/msgrd?V=1&Uin=123456&Site=www.rrf.com.cn &Menu=no" target="_blank">业务咨询</a></td>
        </tr>
        <tr>
          <td><div align="center"><img src="images/QQ.gif" width="16" height="17"></div></td>
          <td><a href="http://wpa.qq.com/msgrd?V=1&Uin=123456&Site=www.rrf.com.cn &Menu=no" target="_blank">业务咨询</a></td>
        </tr>
        <tr>
          <td><div align="center"><img src="images/QQ.gif" width="16" height="17"></div></td>
          <td><a href="http://wpa.qq.com/msgrd?V=1&Uin=123456&Site=www.rrf.com.cn &Menu=no" target="_blank">技术服务</a></td>
        </tr>
        <tr>
          <td><div align="center"><img src="images/QQ.gif" width="16" height="17"></div></td>
          <td><a href="http://wpa.qq.com/msgrd?V=1&Uin=123456&Site=www.rrf.com.cn &Menu=no" target="_blank">意见反馈</a></td>
        </tr>
      </table></td>
      <td width="4" background="images/QQ_7.gif"></td>
    </tr>
    <tr>
      <td colspan="3"><img src="images/QQ_12.gif" width="106" height="44"></td>
    </tr>
</table>
<SCRIPT language=javascript>
<!--
var stmnGAP1 = 70;
var stmnGAP2 = 325;
var stmnBASE = 70;
var stmnActivateSpeed = 200;
var stmnScrollSpeed = 10;

var stmnTimer;

function RefreshStaticMenu()
{
//alert(STATICMENU.offsetTop);
var stmnStartPoint, stmnEndPoint, stmnRefreshTimer;
stmnStartPoint = parseInt(STATICMENU.style.top, 10);
stmnEndPoint = document.body.scrollTop + stmnGAP2;
if (stmnEndPoint < stmnGAP1) stmnEndPoint = stmnGAP1;

stmnRefreshTimer = stmnActivateSpeed;
if ( stmnStartPoint != stmnEndPoint ) {
                stmnScrollAmount = Math.ceil( Math.abs( stmnEndPoint - stmnStartPoint ) / 15 );
                STATICMENU.style.top = parseInt(STATICMENU.style.top, 10) + ( ( stmnEndPoint<stmnStartPoint ) ? -stmnScrollAmount : stmnScrollAmount );
                stmnRefreshTimer = stmnScrollSpeed;
}

stmnTimer = setTimeout ("RefreshStaticMenu();", stmnRefreshTimer);
}

STATICMENU.style.top = document.body.scrollTop + stmnBASE;
RefreshStaticMenu();

function closead()
{
var div=document.getElementById("STATICMENU");
div.style.display="none";
}
//-->
      </SCRIPT>
</DIV>
<table width="778" height="1500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
    <td valign="top"><p>　</p>
      <p align="center">　
    <iframe src="http://www.7stk.com/" width="1026" height="916" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" name="265" target="_blank"></iframe>
      </p>
      </td>
</tr>
</table>

</BODY></HTML>

注意：如果文件加了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

方法1、则要将document.body.scrollTop改成document.documentElement.scrollTop;

否则文件会一直以网页的最开头为基准，则悬浮框不会往下动。

缺点：火狐可以 360等不可以

方法2、直接将<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">删除

yingzi1202

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
悬浮窗口随滚动条的变化改变

无标题文档href="dip.css" type=text/css rel=stylesheet>a:link { color: #000000; text-decoration: none;}a:visited { text-decoration: none; color: #000000;}a:hover { text-decoratio
复制链接

扫一扫