DIV를 jQuery로 가로로 움직입니다.

Question

사용자가 아래로 스크롤 한 후 DIV를 뷰포트로 수평 이동했습니다. 그런 다음 다시 스크롤하면 다시 스크롤됩니다. 그러나 그것이 슬라이드하는 방식은 매우 매우 어색해 보입니다 (잠시 멈추는 경우도 있습니다).

당신은 setTimeout 그 자체로 if 상태에서 setTimeout 호출을 제거하고 전체 블록을 둘 필요가

div#doom_o { 
    position: fixed; 
    left: -300px; 
    z-index: -1; 
    height: 400px; 
    width: 309px; 
    background-image: url("../images/doom_o.png"); 
    background-repeat: no-repeat; 
} 

$(window).scroll(function() { 
    if ($(this).scrollTop() > 100) { 
     setTimeout(function() { 
      $('#doom_o').stop().animate({left: "20%"}); 
     }, 250); 
    } 
    else { 
     setTimeout(function() { 
      $('#doom_o').stop().animate({left: "-300px"}); 
     }, 250); 
    } 
}); 

Answer 1

<div id="doom_o"></div> 

. 이것은 스크롤 이벤트가 발생할 때마다 말더듬이가 발생하지 않고 스크롤이 끝나면 코드가 한 번만 실행된다는 것을 의미합니다.

var timer; 
$(window).scroll(function() { 
    clearTimeout(timer); 
    var timer = setTimeout(function() { 
     if ($(this).scrollTop() > 100) { 
      $('#doom_o').stop().animate({ left: "20%" }); 
     } 
     else { 
      $('#doom_o').stop().animate({ left: "-300px" }); 
     } 
    }, 150) 
}); 

Example fiddle