滚动上的移动元素

我只是搞乱Javascript和JQuery，我一直在努力实现我最近在网络上看到的效果，albiet以更简单的形式。滚动上的移动元素

我想要做的是有一个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/

来源

2011-07-26 danem

其中为p如果从定义（POS％P == 0）？ p应该是百分比吗？ –

哎呀，我忘了改变它，我原来叫'百分比'“p”，但为了可读性，我把它全部改成百分比。对于那个很抱歉。 – danem

pos％百分比是“pos模数百分比”。模数是两个数字的其余部分。例如10％3将为1（10/3 = 9.余数为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); 
     } 
    }); 
});

来源

2011-07-26 18:12:35 ShankarSangoli

呃，我似乎没有工作。出于某种原因，Chrome上的开发者控制台抱怨Uncaught TypeError：无法读取第18行（这是定义百分比的行）的null属性'scrollHeight'。但是，当我在控制台中输入相同的东西时，没有错误... – danem

滚动上的移动元素

回答

相关问题