HTML元素随滚动条滚动-程序员宅基地

技术标签： ViewUI CSS jQuery JavaScript XHTML HTML 工作

比较常见的是一个Div层随滚动条滚动，使Div层位置相对于可视区域不变,其实质就是当滚动条位置改变后，重新定位层的位置。网上有不少的例子，总的思路可以分为两类：
1.CSS样式定位。不同的浏览器及其版本，实现稍有不同。这种方式是利用CSS的expression特性，通过执行绑定的一个计算坐标位置的js表达式，把结果设置为层的坐标值，最终实现Div层位置的滚动。
2.Javascript定位。使用js实现的版本，网上也有很多，利用一些现成的JS组件也可以轻易实现。这种实现方式的原理是监控滚动条的滚动事件，或者设置一个计时器，不断检索滚动条的滚动位置，然后设置层的坐标值,从而实现层的滚动效果。
下面是使用CSS样式定位的方式。简单例子，
方式一:将图片定位在可视区域的左上角

<!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>
    <title>CSS样式定位</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
  </head>
<body>
<img src="my.png" style="position:absolute;left:20px;top:expression(parseInt(document.body.scrollTop)+20);" />
<div style="height:2000px;"></div>
</body>
</html>

这种方式很简单，没有考虑浏览器的兼容性。我们可以改变20的值，直接定位某个坐标。
下面的方式对浏览器做了兼容:将图片定位在可视区域内的右下角

<!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>
    <title>CSS样式定位</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
  </head>
<body>
<script type="text/javascript">
//兼容xhtml1.0和html4 / 用hack兼容ie6 ie7 ff
var imgHtml = '';
var isIE7 = /MSIE 7/.test(navigator.appVersion);
if(document.compatMode && document.compatMode != 'BackCompat'){
   
   imgHtml = '<img src="my.png" style="right:10px; bottom:10px;POSITION:fixed;'+(isIE7?'':'_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);')+'" />';
}else {
   
   imgHtml = '<img src="my.png" style="right:10px; bottom:10px;display:none;POSITION:fixed;*position:absolute; *top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);" />';
 }
document.write(imgHtml);
</script>
<div style="height:2000px;"></div>
</body>
</html>

网上使用CSS样式定位的方式，基本上和上面的类似。下面看看第二中方式：Javascript定位。
使用js定位，如果是自己写代码，可以按照下面的具体步骤去实现：
1.监控滚动元素(一般的是body元素)的onscroll事件，设置层的坐标。

<!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>
    <title>CSS样式定位</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
  </head>
<body>
<div id="myDiv" style="position:absolute;left:20px;background:#555;width:100px;height:100px;" />
<div style="height:2000px;"></div>
<script type="text/javascript">
        var myDivEl = document.getElementById('myDiv');
        var fixpos = myDivEl.style.posTop; 
        document.body.onscroll=function(){ 
          myDivEl.style.posTop = document.body.scrollTop + fixpos;
        } 
</script> 
</body>
</html>

代码说明：
(1)

var myDivEl = document.getElementById('myDiv');
var init_pos = myDivEl.style.posTop;

初始化变量init_pos为层myDiv的Y坐标值，posTop和pixelTop取到的值是纯数字，而top取到的是带"px"单位的字符串。

(2)

document.body.onscroll=function(){ 
myDivEl.style.posTop=document.body.scrollTop+fixpos 
}

这个是在文档区域拖动滚动条时执行的函数，第二行是重新设置层myDivEl的Y坐标，document.body.scrollTop等于滚动滑块上端离滚动的开始点的距离
myDivEl.style.posTop=document.body.scrollTop+fixpos
就是设置层myDiv的Y坐标为文档区域的滚动条已滚动量加上层的原Y轴坐标值之和。

2.下面改进了myDiv平滑移动

<!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>
    <title>CSS样式定位</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
  </head>
<body>
<div id="myDiv" style="position:absolute;left:20px;background:#555;width:100px;height:100px;" />
<div style="height:2000px;"></div>
<script type="text/javascript">
var myDivEl = document.getElementById('myDiv');
//初始化变量fixpos为层myDiv的Y坐标值 
var fixpos = myDivEl.style.posTop 
//文档区域滚动时执行scrollit()函数 
document.body.onscroll=function scrollit(){  
        //层要移动到的目标坐标 
        var target_pos=document.body.scrollTop+fixpos; 
        var step=5; //变量step为步长，层每次移动的距离量 
        //如果是往上拉滚动条，步长应为负值 
        if(myDivEl.style.posTop>target_pos) 
                step*=-1 
        myDivEl.style.posTop+=step //层的Y坐标值增加 
//判断层的当前Y坐标值跟目标距离间的值是否大于一个定值，是的话在50毫秒后继//续执行一次scrollit()函数，否则层停止在当前位置 
if(Math.abs(myDivEl.style.posTop-target_pos)>Math.abs(step)) setTimeout("scrollit()",50) 
} 
</script>
</body>
</html>

3.下面的改进了使myDiv移动更自然点

<!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>
    <title>CSS样式定位</title>
    <meta http-equiv="content-type" content="text/html; charset=gbk">
  </head>
<body>
<div id="myDiv" style="position:absolute;left:20px;background:#555;width:100px;height:100px;" />
<div style="height:2000px;"></div>
<script type="text/javascript">
var myDivEl = document.getElementById('myDiv');
//变量fixpos为层的最初Y坐标值，last_pos为层最后一层移动后的Y坐标值，在下面的函数执行之前它们是相等的 
var fixpos=last_pos=myDivEl.style.posTop; 
/*setInterval(表达式或函数,时间)的作用是每隔一段时间(单位：毫秒)之后执行一次表达式或函数，这里是每1毫秒(千分一秒)执行一次函数*/ 
setInterval(function(){ 
//目标坐标，上两段代码里解释过具体意思了 
var target_pos=document.body.scrollTop+fixpos; 
/*步长，目标位置减上一次移动后的位置的十分一(10是经验数字，换成其它值的话效果会产很远)，因为last_pos是不断接近target_pos的，所以step的绝对值也越来越小，这就是产生弹性移动的原因。最后"|0"的意思是把前面的计算结果跟0进行二进制的按位“或”运算，作用等同于Math.floor()，只是效率更高*/ 
var step=(target_pos-last_pos)/10|0; 
//以step为步长移动层 
myDivEl.style.posTop+=step;
//更新变量last_pos的值，没有这步也不可能产生弹性移动效果 
last_pos+=step; 
//这里的1是1毫秒 
},1); 
</script> 
</body>
</html>

在上面的三个例子中，第一个例子代码比较简单，但运动效果非常生硬，直接跳到目标位置；第二个例子稍好一点，层是匀速移动的；第三个例子效果比较好，模拟真实的物体运动，具有运动缓冲的效果，但因为用了setInterval方法，比较耗系统资源。
特别说明：
层的滚动重点在于用onscroll捕获滚动条的滚动事件，并用document.body.scrollTop获取滚动条滚动的距离，最后设置层的posTop和posLeft属性，还有一个非常有用的缓冲运动的实现。
onscroll 当用户滚动对象的滚动条时触发。
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
posTop 设置或获取以 top 标签属性指定的单位的对象上方位置。
posLeft 设置或获取以 left 标签属性指定的单位的对象左侧位置。

除了自己编写滚动的核心代码的方式，JS定位也可以使用其他的一些js组件来辅助完成，很方便，兼容性也好。
下面是一个使用Jquery组件的API来完成滚动的例子

<!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> 
<title>JQUERY-JS定位</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /> 
<script src="jquery.js" type="text/javascript"></script> 
<script language="javascript"> 
/*
 *设置一个层随滚动条滚动
 */
function scrollDiv(id,duration)
{
   
        var scrollDivEl = $("#"+id);
        var menuYloc = scrollDivEl.offset().top; 
        $(window).scroll(function (){ 
                var offsetTop = menuYloc + $(window).scrollTop() +"px"; 
                scrollDivEl.animate({top : offsetTop },{ duration:duration || 350 , queue:false }); 
        }); 
}

$(document).ready(function(){ 
     scrollDiv("myDiv",350);
}); 
</script> 
</head> 
<body> 
<div id="myDiv" style="position:absolute;left:20px;background:#555;width:100px;height:100px;" />
<div style="height:2000px;"></div>
</body> 
</html>

最后，网络上也有完整的滚动插件，下面是一个基于JQuery插件,实现HTML元素随滚动条(可以设定滚动范围)滚动,已经相当好用，不用再发明轮子了。
[url]http://www.bbon.cn/2009/07/jquery-scroll-follow.html[/url]
[url]http://kitchen.net-perspective.com/open-source/scroll-follow/[/url]

本文链接：https://blog.csdn.net/iteye_17618/article/details/81802871

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

【2024-01-14】各种安卓模拟器安装magisk（magisk-delta) 雷电、蓝叠、MuMu、逍遥、夜神_magisk terminal emulator-程序员宅基地

文章浏览阅读6.9k次，点赞36次，收藏44次。使用Magisk Delta在各种模拟器安装Magisk到System分区的过程_magisk terminal emulator

大数据之Hive:Hive中日期时间函数_hive date format函数-程序员宅基地

文章浏览阅读1.7k次，点赞2次，收藏5次。目录1.date_format函数（根据格式整理日期）2.date_add函数（加减日期），date_sub,date_diff3.next_day函数4.last_day函数（求当月最后一天日期）1.date_format函数（根据格式整理日期）hive (gmall)> select date_format('2021-03-20','yyyy-MM');2020-03备注：与mysql中date_format函数的不同之处是：在hive中，可以指定为"yyyy-MM",在mysql中必_hive date format函数

转贴解决sd卡的读写问题_hc32f460 sd 卡 micro sd卡-程序员宅基地

文章浏览阅读1.6k次。最近sd卡读写出了问题，参考一篇网志解决。http://sns.linuxpk.com/space-1717-do-blog-id-15748.html 在embedded linux下插上一个U盘，在/dev/scsi/ 目录下，出现了4个part 。把该U盘插在pc机，在windows下_hc32f460 sd 卡 micro sd卡

qsort函数（c语言库函数）_qsqrt位于什么库中-程序员宅基地

文章浏览阅读643次，点赞19次，收藏9次。qsort函数的基本概念及代码示例_qsqrt位于什么库中

flink 1.13.1配置报错的解决过程_main error could not create plugin of type class o-程序员宅基地

文章浏览阅读4.3k次。部署flink提交客户端的时间报错如下：提示/tmp下无权限flink@dbos-bigdata-flink004 ~]$ flink run -m yarn-cluster -yjm 1024 -ytm 4096 /opt/flink/examples/batch/WordCount.jarSLF4J: Class path contains multiple SLF4J bindings.SLF4J: Found binding in [jar:file:/opt/flink-1.13.1/l._main error could not create plugin of type class org.apache.logging.log4j.co

大数据概况及Hadoop生态系统_hadoop系统固有功能分析-程序员宅基地

文章浏览阅读308次。一、初识大数据了解大数据是什么。了解大数据的特性。了解大数据带给企业哪些方面的挑战。1.大数据的基本概念大数据（big data），指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合，是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。2.大数据的特性（1）4V特征：a. Volume(大数据量)：90% 的数据是过去两年产生b.Velocity(速度快)：数据增长速度快，时效性高c.Variety(多样化)：数据种类和来源多_hadoop系统固有功能分析

随便推点

html页面播放rtsp流媒体_html播放rtsp流-程序员宅基地

文章浏览阅读2.7k次。采取的方案node.js + Ffmpeg + jsmpeg工具node.js 下载路径https://pan.baidu.com/s/1DYnPW28hZz-I56jOopwxGQFfmpeg下载路径：https://pan.baidu.com/s/1KEGIYrRVLnLyDx1hwx4yBAjsmpeg下载路径：https://pan.baidu.com/s/1p5SnShAlTB..._html播放rtsp流

黑马程序员--Objective-C——面向对象-程序员宅基地

文章浏览阅读319次。------Java培训、Android培训、iOS培训、.Net培训、期待与您交流！ -------一、面向对象的理解面向对象 Object Oriented，简称OO，面向对象的思想，即“万物皆对象”。解决问题思考的是需要用的对象，用这些对象的属性功能去解决问题，而不是去思考解决问题的步骤。把具有相似功能和属性的对象抽象为类，即一个类可以有很多对象，而一个对

由繁化简 Q-Automation助力自动化测试管理-程序员宅基地

文章浏览阅读383次，点赞8次，收藏7次。Q-Automation是基于ATX的自动化测试管理软件，用于测试电子控制单元（ECU）。该软件支持诊断协议层测试和诊断功能测试，且只需填写Excel表格，即可实现半自动化测试需求，从而缩短用户的测试周期。此外，使用ODX/OTX标准化工具，可在支持多种测试硬件的同时，减少测试软件的兼容性问题，还便于与其它工具共享数据。

【试水CAS-4.0.3】第04节_CAS服务端通过数据库认证用户_cas如何数据库管理 serviceid-程序员宅基地

文章浏览阅读5.5k次。完整版见https://jadyer.github.io/2015/07/18/sso-cas-login-db/_cas如何数据库管理 serviceid

C# 调用RESTFul接口_c#调用restful接口-程序员宅基地

文章浏览阅读3.2k次。c# Restful_c#调用restful接口

HOG特征——行人识别_hog特征识别行人 peopledetector=vision.peopledetector; i=-程序员宅基地

文章浏览阅读1.8k次，点赞4次，收藏24次。HOG特征简介HOG 全称为 Histogram of Oriented Gradients ，即方向梯度的直方图。HOG 是由 Navneet Dalal & Bill Triggs 在 CVPR 2005发表的论文中提出来的，目的是为了更好的解决行人检测的问题。先来把这几个字拆开介绍，首先，梯度的概念和计算梯度的方法已经在前一篇文章中介绍了，方向梯度就是说梯度的方向我们也要利用上，..._hog特征识别行人 peopledetector=vision.peopledetector; i=imread(