Question

我只是搞乱Javascript和JQuery而且我一直在努力实现我最近在网上看到的效果，这种效果更简单。

我想要做的是在用户滚动时水平移动div。我想，对于一个简单的原型，需要观察滚动条位置，每当它移动1％的页面时，移动div一定的增量。

//Script
var percent = Math.round((1/100)*document.height);
$(document).ready(function(){
    var boxpos = 10;

    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos%percent==0){
            boxpos+=10;
            $("#box").css("{left:"+boxpos+";}");
        }
    });
});


//css
#content{width:100%; height:4000px;}
#res{position:fixed; left:20px;}
#box{position:fixed; width:20px; height:20px; left:10px; background-color:#F66;}

//html
<body>
<div id="content">
    <div id="box"><p>&nbsp;</p></div>
    <p id="res"></p>
</div>

</body>

我遇到问题的一件事是percent的值似乎永远不应该如此，大部分时间都是0.我无法理解为什么会这样。

我是编程的初学者，欢迎任何和所有评论。我是以一种糟糕的方式接近这个吗？

谢谢！

编辑：为了让您更好地了解我在说什么：http://nizoapp.com/

Answer 1

试试这个

var percent = Math.round((1/100)*$(document).height());
$(document).ready(function(){
    var boxpos = 10;

    $(window).scroll(function(){
        var pos = $(document).scrollTop();
        if(pos%percent==0){
            boxpos+=10;
            $("#box").css("left", boxpos);
        }
    });
});

在滚动上移动元素

1 个答案: