Heim > Artikel > Web-Frontend > 如何让右边的这个块随着网页的下拉而滚动。_html/css_WEB-ITnose
如何让右边的这个块随着网页的下拉而滚动。_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:25:001402Durchsuche
<!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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!--body { margin:0 auto; padding:0;}.test { width:800px; height:2000px; background:#999999;}.test1 { width:100px; height:2000px; background:#0000CC; float:left;}.test2 { width:650px; height:2000px; background:#CC0000; float:right;}.test3 { width:150px; height:150px; background:#CC9900; float:right;}--></style></head><body><div class="test"><div class="test1"></div><div class="test2"><div class="test3"></div></div></div>我想让test3这个div随着网页的下拉滚动而随着滚动，求js代码。</body></html> 回复讨论(解决方案)
其实不需要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><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css"><!--body { margin:0 auto; padding:0;}.test { width:800px; height:2000px; background:#999999;}.test1 { width:100px; height:2000px; background:#0000CC; float:left;}.test2 { width:650px; height:2000px; background:#CC0000; float:right;}.test3 { width:150px; height:150px; background:#CC9900; float:right;}--></style></head> <body><div class="test"><div class="test1"></div><div class="test2"><div class="test3" id="test"></div></div></div>我想让test3这个div随着网页的下拉滚动而随着滚动，求js代码。<script> function toolbar(el){ el = typeof el == 'string' ? document.getElementById(el) : el; var elTop = el.offsetTop; var sTop = 0; window.onscroll = function(){ sTop = document.body.scrollTop || document.documentElement.scrollTop; if( sTop > elTop ){ el.style.marginTop = sTop + 'px'; }else{ el.style.marginTop = elTop + 'px'; } } } toolbar('test');</script></body></html> 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：做了一个简单的静态导航页面_html/css_WEB-ITnoseNächster Artikel：url表达式怎么不能为空，又能判断url是否符合规则。_html/css_WEB-ITnose