JQuery：$(window).scroll 函数上的 .animate答案

【问题标题】：JQuery: .animate on $(window).scroll functionJQuery：$(window).scroll 函数上的 .animate
【发布时间】：2012-05-08 15:39:22
【问题描述】：

我正在使用以下代码为“火车时间表”保留标签，类似于 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

【问题讨论】：

更平滑究竟是什么意思？你想要线性动画吗？
如果您尝试代码，它会出现锯齿状和断断续续的情况，因为它会从滚动中获取值，因此当水平滚动时，标签会左右增量移动，并且会闪烁。 .Animate 理论上应该通过添加过渡来解决这个问题...

标签： javascript jquery jquery-animate

【解决方案1】：

试试这个：

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

【讨论】：

不幸的是，这无济于事。标签不再固定，也不再动画。

【解决方案2】：

我用 .animate() 和 .stop() 试过这个。 http://jsfiddle.net/C2f7f/

【讨论】：

这似乎并没有复制原始脚本的行为，即在滚动时保持标签左侧。