Jquery 移动滚动条上的div，使其在滚动条的顶部和底部处于不同的位置
我有这个网站，我希望火箭在页面底部登陆月球。 滚动时，它必须跟随网站，但在页面底部，它必须向下移动到月球上。有人有主意吗？我试过几件事，但都没修好Jquery 移动滚动条上的div，使其在滚动条的顶部和底部处于不同的位置,jquery,Jquery,我有这个网站，我希望火箭在页面底部登陆月球。 滚动时，它必须跟随网站，但在页面底部，它必须向下移动到月球上。有人有主意吗？我试过几件事，但都没修好 您可以收听onscroll事件来更改炸弹的位置 <html> <head> <style> #outer { height: 100%; width: 100%; over
您可以收听onscroll事件来更改炸弹的位置
<html>
<head>
<style>
#outer {
height: 100%;
width: 100%;
overflow: auto;
}
#inner {
height: 3000px;
width: 1000px;
position: relative;
}
#bomb {
background-color: black;
width: 50px;
height: 50px;
position: absolute;
left: 450px;
top: 30px;
z-index: 1000;
}
#moon {
width: 100%;
height: 100px;
background-color: yellow;
position: absolute;
left: 0px;
top: 2900px;
}
</style>
<script type="text/javascript">
var animaTimer;
function updatePosition () {
var outer = document.getElementById('outer'),
bomb = document.getElementById('bomb'),
top = outer.scrollHeight * (outer.scrollTop / (outer.scrollHeight - outer.clientHeight)) + 30 - 50;
top = top < 30? 30 : top > 2900? 2900 : top;
// clear old timer
if (animaTimer)
clearInterval(animaTimer);
// start move
moveBomb (bomb, top);
}
function moveBomb (bomb, pos) {
animaTimer = setInterval (function () {
// bpos: current position of bomb
// mov: the target position
var bpos = parseInt (bomb.offsetTop),
mov = (pos - bpos) / 6;
if (mov <= 2 && mov >= -2) { // only 2px left
bomb.style.top = pos + 'px';
clearInterval(animaTimer);
} else {
bomb.style.top = bpos + mov + 'px';
}
}, 50);
}
</script>
</head>
<body>
<div id="outer" onscroll="updatePosition();">
<div id="inner">
<div id="bomb"></div>
<div id="moon"></div>
</div>
</div>
</body>
</html>
#外{
身高：100%；
宽度：100%；
溢出：自动；
}
#内在的{
高度：3000px；
宽度：1000px；
位置：相对位置；
}
#炸弹{
背景色：黑色；
宽度：50px；
高度：50px；
位置：绝对位置；
左：450px；
顶部：30px；
z指数：1000；
}
#月亮{
宽度：100%；
高度：100px；
背景颜色：黄色；
位置：绝对位置；
左：0px；
顶部：2900px；
}
var-animaTimer；
函数updatePosition（）{
var outer=document.getElementById（'outer'），
bomb=document.getElementById（'bomb'），
top=outer.scrollHeight*（outer.scrollTop/（outer.scrollHeight-outer.clientHeight））+30-50；
顶部=顶部<30？30：顶部>2900？2900：顶部；
//清白的老家伙
if（animaTimer）
clearInterval（animaTimer）；
//开始行动
移动炸弹（炸弹，顶部）；
}
功能移动炸弹（炸弹，pos）{
animaTimer=setInterval（函数（）{
//bpos：炸弹的当前位置
//mov：目标位置
var bpos=parseInt（炸弹偏移），
mov=（pos-bpos）/6；
如果（mov=-2）{//只剩下2px
bomb.style.top=pos+'px'；
clearInterval（animaTimer）；
}否则{
bomb.style.top=bpos+mov+‘px’；
}
}, 50);
}