jQuery从下到上移动对象

Question

I have this code to move the box on scroll from top to bottom, but i would like to reverse it, instead from top to bottom i would like to move it from bottom to top. Here's my code guys:

<script type="text/javascript">
            $(document).ready(function() {
                $(window).scroll(function() {
                    var x = $(document).scrollTop();
                    var wh = $(window).height();
                    console.log($(document).scrollTop());
                    $('.box').css('top', x);
                });
            });
</script>

UPDATE CSS:

body {
                background-image:url('bg.jpg');
                height: 20000px;
            }

            div {
                width: 50px;
                height: 50px;
                background: #f00;
                top: 0%;
                position: fixed;
            }

this codes moves the box from top to bottom, how to move it from bottom to top? thanks guys for your answers.

Answer 1

If I understood you correctly, you want to move the box from bottom to top when you're scrolling down. Hope this will help.

$(window).scroll(function() {
    var x = $(document).scrollTop();
    var dh = $(document).innerHeight();
    var offset = x/dh*100+'%';
    $('.box').css('bottom', offset);
});

http://jsfiddle.net/avDMJ/13/

Answer 2

Would be good if you post your css code.

But here is one proposal:

$('.box').css('bottom', wh);