JQuery: .animate on $ (window) .scroll function

Я использую следующий код для хранения меток для «таблицы времени поезда», аналогичной свойству «fixed» 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

Edit: я разместил код 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

ответ

Смежные вопросы