DIV跟随垂直滚动条并置顶

最新推荐文章于 2024-06-05 11:15:38 发布

weixin_30677073

最新推荐文章于 2024-06-05 11:15:38 发布

阅读量519

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript c# ViewUI

原文链接：http://www.cnblogs.com/Gsun/archive/2009/03/21/1418521.html

本文介绍了一种使用JavaScript实现页面元素随滚动条上下移动的效果。通过不断更新元素的位置，使其始终保持在屏幕的固定位置，适用于创建对联广告或其他需要跟随滚动条移动的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!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 language="JavaScript">
 
 //关闭按钮
 function close_left1(){
 left1.style.visibility='hidden';
 }
 function close_left2(){
 left2.style.visibility='hidden';
 }
 function close_right1(){
 right1.style.visibility='hidden';
 }
 function close_right2(){
 right2.style.visibility='hidden';
 }
 //显示样式
 document.writeln("<style type=\"text\/css\">");
 document.writeln("#leftDiv,#rightDiv{width:30px;height:30px;position:absolute;}");
 document.writeln(".itemFloat{width:30px;height:auto;line-height:5px}");
 document.writeln("<\/style>");
 //以下为主要内容
 document.writeln("<div id=\"leftDiv\" style=\"top:40px;left:5px\">");
 //------左侧各块开始
 //---L1
 document.writeln("<div id=\"left1\" class=\"itemFloat\">");
 document.writeln("<\/div>");
 //---L2
 document.writeln("<div id=\"left2\" class=\"itemFloat\">");
 document.writeln("<\/div>");
 //------左侧各块结束
 document.writeln("<\/div>");
 document.writeln("<div id=\"rightDiv\" style=\"top:530px;right:5px\">");
 //------右侧各块结束
 //---R1
 document.writeln("<div id=\"right1\" class=\"itemFloat\">");
 document.writeln("<\/div>");
 //---R2
 document.writeln("<div id=\"right2\" class=\"itemFloat\">");
 document.writeln("<a href=# title=返回顶部><img border=0 src=images/lo.jpg></a>");
 document.writeln("<\/div>");
 //------右侧各块结束
 document.writeln("<\/div>");
</SCRIPT>

</head>
<body>
 <form id="form1" runat="server">
 <div>
 
 </div>
 </form>
 <script type="text/javascript">
 heartBeat()
 </script>
</body>
</html>