<!DOCTYPE html><html><head><meta charset="utf-8"><title>练习</title><style type="text/css">.box {width: 100%;height: 2000px;border: 2px solid teal;}.header {border: 2px solid #eee;width: 100%;height: 100px;margin-bottom: 10px;}.insidar {width: 20%;height: 300px;border: 2px solid #eee;float: left;}.content {width: 78%;height: 1800px;border: 2px solid #eee;margin-right: 10px;float: right;}.footer {width: 100%;height: 50px;border: 1px solid #eee;position: absolute;top:1950px;}</style></head><body><div><div></div><div></div><div></div><div></div></div><script type="text/javascript">var getID=function(id){return document.getElementById(id);}var addEvent = function(obj,event,fun){if (obj.addEventListener) {obj.addEventListener(event,fun,false);}else if(obj.addEventListener()){obj.attachEvent("on"+event,fun)}}var insidarx = getID("insidar");addEvent(window,"scroll",function(){var scrollHeight = document.body.scrollTop;var contentHeight = getID("content").offsetHeight-insidarx.offsetHeight;if (scrollHeight>100 && scrollHeight<contentHeight+100) {insidarx.style.position = "absolute";insidarx.style.left = "0px";insidarx.style.top = scrollHeight-100+"px";}else if (scrollHeight<=100) {insidar.style.position= "absolute";insidar.style.left = "0px";insidar.style.top = "0px";}});</script></body></html>
添加回答
举报
0/150
提交
取消