html中div随滚动条移动
如何让一个div在右侧浮动，让它随滚动条的下拉移动而产生滚动效果。。。。。不想用position:fixed属性，他把div给定死了，我想要一个动态的效果，，，在Css或...
如何让一个div在右侧浮动，让它随滚动条的下拉移动而产生滚动效果。。。。。不想用position:fixed属性，他把div给定死了，我想要一个动态的效果，，，在Css或js中怎么写代码，不需要太复杂的，求大神指教，非常感谢。。。初学者向大神致敬。。。。。
展开
2个回答
展开全部
<style type="text/css"> .img{ position:absolute; width:100px; height:100px; top:100px; right:18px;} </style> <body> <div class="img" id="sroling" > <img src="images/png-1783.png" /> </div> <script type="text/javascript"> var id=function(i){return document.getElementById(i)} var scroll=function (i){ var space=id(i).offsetTop; id(i).style.top=space+'px'; void function(){ var goTo = 0; var roll=setInterval(function(){ var height =document.documentElement.scrollTop+document.body.scrollTop+space; var top = parseInt(id(i).style.top); if(height!= top){ goTo = height-parseInt((height - top)*0.9); id(i).style.top=goTo+'px'; } //else{if(roll) clearInterval(roll);} },12); }() } scroll('sroling'); </script> </body> 你把页面加大点就可以看到效果。。。求采纳！！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<html>
<head>
<title></title>
<style type="text/css">
body {
margin:0px auto;
}
#fixedLayer {
position:fixed;
left: 5px;
top: 10px;
width:100px;
<a href="https://www.baidu.com/s?wd=line-height&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPWnkuHRkmycknHR1mWFh0AP8IA3qPjfsn1bkrjKxmLKz0ZNzUjdCIZwsrBtEXh9GuA7EQhF9pywdQhPEUiqkIyN1IA-EUBtLnHc4njb4nH63n1T4njb3njR" target="_blank" class="baidu-highlight">line-height</a>:30px;
background: #FC6;
border:1px solid #F90;
}
</style>
</head>
<body>
<div id="fixedLayer">固定不动</div>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
</body>
</html>
<head>
<title></title>
<style type="text/css">
body {
margin:0px auto;
}
#fixedLayer {
position:fixed;
left: 5px;
top: 10px;
width:100px;
<a href="https://www.baidu.com/s?wd=line-height&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1dBPWnkuHRkmycknHR1mWFh0AP8IA3qPjfsn1bkrjKxmLKz0ZNzUjdCIZwsrBtEXh9GuA7EQhF9pywdQhPEUiqkIyN1IA-EUBtLnHc4njb4nH63n1T4njb3njR" target="_blank" class="baidu-highlight">line-height</a>:30px;
background: #FC6;
border:1px solid #F90;
}
</style>
</head>
<body>
<div id="fixedLayer">固定不动</div>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
<p>ddddddd</p>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
