Home/ Questions/Q 6200879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T04:27:01+00:00

I’m just messing around with Javascript and JQuery and I’ve been trying to achieve

  • 0

I’m just messing around with Javascript and JQuery and I’ve been trying to achieve an effect that I’ve seen around on the web recently, albiet in a much simpler form.

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: To give you all a better idea of what I am talking about: http://nizoapp.com/

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this

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