title: Moving elements on scroll
body: <p>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. </p>
  
  <p>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. </p>
  
  <pre><code>//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
  &lt;body&gt;
  &lt;div id="content"&gt;
      &lt;div id="box"&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;/div&gt;
      &lt;p id="res"&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>One thing I've been having problem with is that the value of <code>percent</code> never seems to be as it should, and most of the time is 0. I cannot understand why that should be. </p>
  
  <p>I'm a beginner to programming so any and all comments are welcome. Am I approaching this in a poor way?</p>
  
  <p>Thanks!</p>
  
  <p>Edit: To give you all a better idea of what I am talking about: <a href="http://nizoapp.com/" rel="nofollow">http://nizoapp.com/</a></p>