JQuery：.animate on $（window）.scroll function

我使用下面的代碼來爲「列車時間表」標記類似於CSS「固定」屬性，以允許我垂直滾動頁面，但保留標籤水平固定。這個腳本工作正常，但我希望看到它更順暢，我已經嘗試使用.animate屬性，但不能在這種情況下得到它的工作。

我可以讓所有的工作都能明智地進行，我只是希望它更流暢。任何幫助表示讚賞。

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
    $(window).scroll(function(){ 
     $('#tramLabels').css({ 
      'left': $(this).scrollLeft() +5 
     }); 
    }); 
</script>

下面是該頁面的其他代碼;

<style type="text/css"> 
#tramLabels { 
    position: absolute; 
    z-index: 99; 
    width: 200px; 
    top: 0px; 
    left: 5px; 
} 
#tramTime{ 
    position: absolute; 
    z-index: 0; 
    width: 100%; 
    top: 0px; 
    left: 10px; 
} 
</style> 


</head> 

<body> 
<div id="tramLabels"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    </table> 
</div> 
<div id="tramTime"> 
    <table width="900px" border="0" cellspacing="0" cellpadding="0"> 
    </table> 
</div

編輯：我放置代碼here for you to try

來源

2012-05-08 cjcee

你是什麼意思，更平滑？你想要一個線性動畫嗎？ –

如果您嘗試使用代碼，則會出現鋸齒狀和結構錯位，因爲它會抓取滾動的值，所以當水平滾動時，標籤會逐漸左右移動，並且閃爍。 .Animate理論上應該通過添加轉換來解決這個問題。 – cjcee

嘗試這種情況：

<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
    $(window).scroll(function(){ 
     $('#tramLabels').animate({ 
      'left': +5 
     }); 
    }); 
</script>

來源

2012-05-08 15:51:50

不幸的是，這無能爲力。標籤不再保留，也不會動畫。 – cjcee

我試圖與.animate（）和.stop（）。 http://jsfiddle.net/C2f7f/

來源

2012-05-08 15:59:41 sofl

儘管這似乎並沒有複製原始腳本的行爲，這是爲了在滾動時保持標籤離開。 – cjcee

JQuery：.animate on $（window）.scroll function

回答

相關問題