首頁 > web前端 > html教學 > 如何让右边的这个块随着网页的下拉而滚动。_html/css_WEB-ITnose

如何让右边的这个块随着网页的下拉而滚动。_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:25:00
原創
1429 人瀏覽過

<!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>
登入後複製

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板