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

回答

相关问题