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

WBOY
发布: 2016-06-24 12:25:00
原创
1404 人浏览过

<!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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板