Question

我只用 Java字和JQuery和I ve,用更简单的方式,在最近网上看到我所看到的影响。

What I am trying to do is have a div move horizontally when the user scrolls. My thought, for a simple prototype, involves watching the scrollbar position, and whenever it travels 1% of the page, move the div a certain increment.

//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>

One thing I ve been having problem with is that the value of percent never seems to be as it should, and most of the time is 0. I cannot understand why that should be.

I m a beginner to programming so any and all comments are welcome. Am I approaching this in a poor way?

Thanks!

Edit: 给大家一个更好的想法,了解我所谈论的内容:。

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);
        }
    });
});

友情链接