페이지 스크롤을 사용하여 고정 div에서 내용을 부드럽게 스크롤하는 방법

페이지를 아래로 스크롤 할 때 메뉴가 변경되는 고정 된 상단 탐색을 만들려고합니다. 특정 y 점을지나 스크롤하면 메뉴가 스크롤되어 페이지가 아래로 스크롤되어 끈적 거리는 두 번째 메뉴가 표시됩니다. http://jsfiddle.net/hSpLQ/페이지 스크롤을 사용하여 고정 div에서 내용을 부드럽게 스크롤하는 방법

나는 두 가지 주요 문제

) 콘텐츠가 원활하게 이동하지 않습니다이 : 여기 거친 버전을 구현했습니다. 빨리 스크롤하면 내용이 부드럽게 움직이지 않는 것을 알 수 있습니다.

2)이 유형의 애니메이션/효과를 구현하는 가장 좋은 방법인지 확신 할 수 없습니다. 코드는 거칠지 만이를 수행하는 데 더 좋고/더 좋은 방법이 있는지 궁금합니다.

감사

은 (JsFiddle 링크와 동일) 거친 프로토 타입의 코드

<html lang="en"> 
    <head> 
     <style type="text/css"> 
      body{ 
       height: 2000px; 
      } 

      .container { 
       position: fixed; 
       top: 0px; 
       left: 0px; 
       width: 100%; 
       background-color: #CCC; 
       height: 80px; 
       overflow: hidden; 
      } 

      .content1, .content2 { 
       height: 40px; 
       margin: 40px; 
      } 
     </style> 

    </head> 
    <body> 
     <div class="container"> 
      <div class="content"> 
       <div class="content1"> 
        lots of text 
       </div> 
       <div class="content2"> 
        more text 
       </div> 
      </div> 
     </div> 
    </body> 

    <script src="js/jquery.min.js"></script> 

    <script type="text/javascript"> 
     $(window).scroll(function() { 
      var scrollYpos = $(document).scrollTop(); 
      if (scrollYpos > 200 && scrollYpos < 300) { 
       var y = 200-scrollYpos; 
       $(".content").css({'position': 'relative', 'top': y}); 
      } 
     }); 
    </script> 

</html>

출처

2013-07-21 user41293

당신 등이 사용자의 CPU, 브라우저, 브라우저 버전, 심지어 그래픽 카드를 제어 할 수 없기 때문에 네가 할 수있는 일이별로 없다. 성능을 조금 향상시키기 위해 jQuery 대신 바닐라 자바 스크립트를 사용해 볼 수도 있지만, 그다지 도움이되지는 않습니다. (렌더링이나 스크립트 인터프리터가 느린 지에 따라 달라지지 않을 수도 있습니다.)
예를 들어, 제 브라우저에서는 예제가 아주 부드럽게 작동합니다.
정말 클라이언트에 따라 달라지며, 이는 웹에 불과합니다. 그것에 대해 너무 걱정하지 마십시오.

마지막으로 내가 발견 2 가지가있다 :

당신은 설정 "위치 : 상대"하지 않아도 각각의 스크롤 이벤트가 수신 될 때, 당신의 스타일에 한 번 설정

한 경우, 스크롤

$(window).scroll(function() { 
    var scrollYpos = $(document).scrollTop(); 

    var y; 
    if (scrollYpos > 200 && scrollYpos < 300) { 
     y = 200 - scrollYpos; 
    } else if (scrollYpos > 300) { 
     y = -100; 
    } else { 
     y = 0; 
    } 

    console.log(y); 
    $(".content").css({'top': y}); 
});

: 너무 빠른 메뉴가 홀수 위치 여기

에 갇혀 도착하면이 smoothnes 문제가 해결되지 수 있지만 위의 문제를 해결하는 코드입니다

그냥 간격을 조금 스크롤 사이의 간격을 부드럽게하려면이 시도 : 자바 스크립트의 편집에 대한

$(window).scroll(function() { 
    var scrollYpos = $(document).scrollTop(); 

    var y; 
    if (scrollYpos > 200 && scrollYpos < 300) { 
     y = 200 - scrollYpos; 
    } else if (scrollYpos > 300) { 
     y = -100; 
    } else { 
     y = 0; 
    } 

    var position = parseInt($(".content").css('top')); 
    if((scrollYpos < 300 && scrollYpos > 200) 
    || (position < 0 && position > -100)) { 
     $(".content").stop().animate({'top': y}, 50); 
    } 
});

출처

2013-07-21 21:04:50 alexander255

감사합니다. 나는 그것이 부드럽게 스크롤되도록 작동하는 방식을 바꾸었다. 스크롤되는 픽셀의 수를 기준으로 콘텐츠를 이동하는 대신 특정 스크롤 지점에서 애니메이션을 생성합니다. 도움에 감사드립니다. – user41293

페이지 스크롤을 사용하여 고정 div에서 내용을 부드럽게 스크롤하는 방법

답변

관련 문제