사용자가 페이지를 스크롤 할 때 DOM 개체 4 개를 이동하려고합니다. 당신은 내가이 주소에 대해서 이야기하고 페이지를 확인할 수 있습니다jQuery 창 스크롤에 애니메이션 적용 : 더 많은 개체를 병렬로 이동하고 고정 된 CSS 위치로 개체의 원치 않는 지연을 방지합니다.
: 사용자가 스크롤로
http://www.tessuti-arredo.it/new/chi_siamo/rassegna/
- 내가 $ (창) .scroll을 사용하고을 (함수() - 내가 있는지 확인 window.scrollTop 일부 개체를 이동하려면 10 픽셀 이상입니다.이 작동하지 않는 것 같아요. ELSE 문을 (scrollTop 10 픽셀보다 작은 경우) - 및 해당 개체를 원래 위치로 다시 이동해야합니다. - 저는 이상한 행동을합니다. 특히 움직이는 4 개의 물체 중 2 개의 물체 (두 개의 고정 된 물체가 함께 움직여 클래스를 호출 함)
영어로는 설명하기가 다소 복잡 할 수도 있지만 위에 게시 한 주소를 보면 쉽게 이해할 수 있습니다. 페이지를 스크롤하십시오. 내가 이동하려는
객체는 다음과 같습니다 - (가) 개체가는 #header DIV = $ ("# 헤더의 H1은") 내부에 포함 된 링크 - 자신의 ID = 호출 왼쪽 사이드 바 메뉴 $ (" #sidebar ") - 두 개의 고정 된 div, 주 메뉴와 배경, 클래스 = $ (". moveMenu ")
중요한 마지막 한 가지 : Firefox의 경우 모든 것이 좋습니다. 다른 브라우저 내 코드에서 일부 오류처럼 보이는 가변 지연이 있습니다.
, 내 코드에 대해 말하기 여기있다 :
좀 빈 콜백가 알고$(document).ready(function(){
$(window).scroll(function(){
if($(this).scrollTop() > 10) {
$("#sidebar").stop().animate({top:'119px'}, 100, function(){
// some callback
});
$("#header h1 a").stop().animate({marginTop:'30px'}, 100, function(){
// some callback
});
$(".moveMenu").stop().animate({top:'0'}, 300, function(){
// here i change the class of fixed objects to call them back on else statement
$(this).removeClass('moveMenu').addClass('moveMenu2');
});
}else{
// this is happening with unwanted delay
$(".moveMenu2").stop().animate({top:'90'}, 300, function(){
$(this).removeClass('moveMenu2').addClass('moveMenu');
});
$("#sidebar").stop().animate({top:'89px'}, 100, function(){
$(this).css({'padding-top' : '40px'});
});
$("#header h1 a").stop().animate({marginTop:'0px'}, 100, function(){
// some callback
});
}
});
});
가, 난 그냥 뭔가 채울가 준비하도록 유지, 내가 그들을 삭제 tryed, 아무것도 변경되지 않습니다 .
는 난 정말 당신이 내 코드에서 몇 가지 오류를 찾을 희망, 나는 '알아 ... 내가 tryed 또 다른 한가지는 대신 클래스의 특정 ID를 가진 두 개의 지연 개체를 호출하는 것입니다하지만 아무것도 더 나은 사라 없다 별로 좋지 않아.
별로 도움이되지 않지만 꽤 매끄러운 효과입니다. :) 명성. 지금 몇 가지 유용한 제안을 제공 할 수 있는지 확인하기 위해 코드를 살펴 봅니다. – Faisal