스크롤 후 DIV 위치 변경

Question

스크롤 다운 후 위치가 변경되는 탐색 모음이 있습니다. 그것은 position : fixed와 함께 작동하지만, 스크롤하는 동안 사이트에서 계속되는 다른 모든 컨텐트처럼 움직이기를 원합니다. 나는 사용자가 상단에 위치를 변경해야 스크롤 중지 : Heres는

데모 : http://jsfiddle.net/gvjeyywa/5/

(특히 아이 패드의 스크롤) 절대 :

http://jsfiddle.net/gvjeyywa/7/

하지만 내가 그 위치가되고 싶어요를

JS가 JS를 초과하게하려면 어떻게해야합니까? 여기 내 JS가 :

var isInAction = false; 
    var lastScrollTop = 0; 
    $(window).scroll(function(event){ 
    var st = $(this).scrollTop(); 
    if (st > lastScrollTop){ 
    if (!isInAction){ 
     isInAction = true; 
     $("#navigation").animate({ 
      top: "-" + $("#navigation").innerHeight() + "px" 
     }).delay(1000).animate({ 
      top: "0px" 
     }, 800, function() { 
      isInAction = false; 
      }); 
     } 
     } 
    lastScrollTop = st; 
}); 

Answer 1

첫 번째로 나는 불가능하다고 생각하지만 몇 가지 시도 후에이 코드가 만들어졌다.
나는이 코드를 작성하고 여러 가지 기술을 사용하고 도움이되기를 희망하며 오랜 시간을 보냈습니다. 어쩌면 간단한 해결책도 있습니다 !!

var bitFlag = false; 
var lastScrollTop = 0; 
var timeoutId; 
$navigation = $("#navigation"); 
$(window).scroll(function (event) { 
    var intWindowTop = $(window).scrollTop(); 
    var intElementBottom = $navigation.offset().top + $navigation.innerHeight(); 
    if (intWindowTop > lastScrollTop) { 
     if (!bitFlag) { 
      $navigation.css("position", "absolute").css("top", intWindowTop + "px"); 
      bitFlag = true; 
     } 
     if (timeoutId) { 
      clearTimeout(timeoutId); 
     } 
     timeoutId = setTimeout(function() { 
      if (intWindowTop > intElementBottom) { 
       intDelayTime = setTimeout(function() { 
        $navigation.animate({ 
         top: intWindowTop + "px" 
        }, 800); 
       }, 500); 
      } 
     }, 100); 
    } else { 
     $navigation.css("position", "fixed").css("top", "0px"); 
     bitFlag = false; 

    } 
    lastScrollTop = intWindowTop; 
}); 

밀리 초 }, 500); 부 제어 지연 시간과 }, 800); 부 제어 애니메이션 속도 아래로 슬라이드.

Check JSFiddle Demo