Question

我有这个网站，我希望火箭落在页面底部的月球上。虽然滚动它必须跟随网站，但在页面的底部它必须向下移动到登陆月球。有人有个主意吗？我尝试了几件事，但无法修复。

http://www.websoy.nl/PROMO-WEBSITE/

Answer 1

您可以收听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>

在滚动的顶部和底部的不同位置滚动div

1 个答案: