滾動上的移動元素

我只是搞亂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

滾動上的移動元素

回答

相關問題