시차 주사위가 번갈아 가면서 시차 주사 화면이 번갈아 표시됩니다.

Question

새 화면이로드되면 스크롤을 번갈아 수행 할 수있는 간단한 시차 분할 화면 사이트를 만들려고합니다. 예를 들어 아래로 스크롤하면 왼쪽과 오른쪽의 내용이 표시되고 오른쪽을 잠그고 내용이 완료 될 때까지 왼쪽에서만 스크롤이 발생하게하고 싶습니다.

http://alvarotrigo.com/blog/multiscroll-js-jquery-plugin-to-create-multi-scrolling-sites-with-two-vertical-layouts/

를하지만의 부분 부하 그냥 필요가되면 다음과 같이 스크롤 왼쪽 :

그래서 다음과 같이 시작한다 왼쪽 함량이되면

http://www.themealings.com.au/leesa/portfolio/nick-jr-parents-blog/

완료 나는 새로운 섹션을 발표하고 싶다. 이것이 일어날 수있는 방법에 대한 아이디어가 있습니까? 이것을 달성하기위한 최고의 JS 라이브러리는 무엇입니까?

Answer 1

매우 쉽게 수행 할 수있는 몇 가지 플러그인이 있습니다.

여기 http://viget.com/inspire/jquery-stick-em

데모이 탄 -----> 보내기 ----->http://davist11.github.io/jQuery-Stickem/

나는 현재 비슷한 달성이 어려운 코드를 사용하고, 그래서이 될 수 있습니다 뿐만 아니라 사용 : 당신은 또한 당신의 .css 파일에이 요소를 추가해야합니다

var $window = $(window), 
    $mainMenuBar = $('#fixed-div'), //This div will scroll until top 
    $menuBarOffset = $mainMenuBar.offset().top, 
    window_top = 0, 
    footer_offset = $("#end-div").offset().top, //this div tells #fixed-div when to start scrolling 
    content = $("#unaffected-div"), //This div scrolls like normal 
    panel_height = $mainMenuBar.outerHeight()+'px'; 


$window.scroll(function() { 
    window_top = $window.scrollTop(); 

    if (window_top >= $menuBarOffset) { 
     if (window_top >= footer_offset) { 
      $mainMenuBar.removeClass('stick'); 
      content.css('margin-top', 0); 
     } else { 
      $mainMenuBar.addClass('stick'); 
      content.css('margin-top', panel_height); 
     } 
    } 
    else { 
     $mainMenuBar.removeClass('stick'); 
     content.css('margin-top', 0); 
    } 
}); 

.stick { 
position: fixed; 
top: 0; 
}