Как анимировано двигать div по горизонтали?

Question

[atambalasi]

HTML

<header>
<div class="major"></div>
</header>

JS

var tempScrollTop, currentScrollTop = 0;
				var x = 4;
				
				jQuery(document).scroll(function(){

				currentScrollTop = jQuery(document).scrollTop();
			     
				
				 
				if (tempScrollTop < currentScrollTop )
				{
					if(tempScrollTop > 0 && tempScrollTop < 25){
						$('div').animate({
								'left': (x++)+'%'
						}, 100);
					}
						  console.log("Scroll to BOTTOM x =" + (x++));
				}
					
				else if (tempScrollTop > currentScrollTop )
				{
					if(tempScrollTop > 0 && tempScrollTop < 25){
					$('div').animate({
							'left': tempScrollTop + '%'
						}, 100);
					}
						  console.log("Scroll to TOP x =" + (--x));
				}
				
				

				tempScrollTop = currentScrollTop;
				});

Что в итоге получаю? Див перемещается когда скролим вниз вправо а когда скролим вверх влево. Но прыгает. Если увеличиваю время animate див отстает от скролла. Нужен плавный перемещения вправо и влево зависимости от скролла(топ или bottom) но при этом не должен отставать от скролла(Родительский элемент в хедере после 200px не видно в экране).

Comments

[Андрей]

Вы бы выкладывали свой код на сайты вроде jsfiddle.net, тогда было бы проще понять работу вашего скрипта и найти решение проблемы

Answer 1

[Shane Matte]

Animate зря, при каждом скроле вызывается animate в 300мс по дефолту, поэтому висит. Используй css