Heim > Artikel > Web-Frontend > 设置DIV随滚动条滚动而滚动_html/css_WEB-ITnose
设置DIV随滚动条滚动而滚动_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:47:511035Durchsuche
有段时间没有碰Web端了，最近做了个功能，需要做个DIV随滚动条滚动而滚动，mark一下：
源码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <title>div随滚动条滚动而滚动</title> 6 <style type="text/css"> 7 #divContainer{width:1200px;height:1800px;border:1px solid #0000FF;margin:0px auto;} 8 /* 9 设置div固定显示在屏幕位置时，定位计算公式：10 11 left:50% + margin-left:±（页面内容部分宽度+div宽度+间隔像素）12 */13 #divMain{width:500px;height:400px;margin:0px auto;position:fixed;top:50%;left:50%;border:1px solid #ff0000;text-align:center;line-height:400px;margin:-200px 0px 0px -350px;}14 </style>15 </head>16 17 <body>18 <div id="divContainer">19 <div id="divMain">20 <span>div随滚动条滚动而滚动</span>21 </div>22 </div>23 </body>24 </html>
预览效果：
该功能实现方式使用CSS实现，使用jQuery也能实现同样的功能。
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Article标签_html/css_WEB-ITnoseNächster Artikel：Section标签_html/css_WEB-ITnose