순수 CSS 시차가있는 Jquery 스크롤이 작동하지 않습니다.

Question

순수한 CSS 시차 페이지 (http://blog.keithclark.co.uk/pure-css-parallax-websites/)에 대한 유명한 Keith Clark 자습서로 작업하려고합니다.

지금까지 그렇게 좋았습니다. 문제는 jQuery 부드러운 스크롤과 navbar를 결합하고자 할 때입니다.

페이지가 이미 스크롤 될 때 문제가 발생합니다. 그래서 기본적으로, 위에서 스크롤하면 원하는 지점으로 정확하게 스크롤되지만, 제품이나 연락처에 페이지가 있으면 이상한 곳으로 스크롤됩니다.

다른 스 니펫을 사용해 보았지만 제대로 작동하지 않는 것 같습니다.

HTML

탐색 :

<ul class="nav navbar-nav navbar-right"> 
    <li><a href="#group2">Home</a></li> 
    <li><a href="#group3">About</a></li> 
    <li><a href="#group5">Products</a></li> 
    <li><a href="#group7">Contact</a></li> 
</ul> 

바디 :

<div class="parallax"> 
    <div id="group2" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--back"> 
      <div class="title">START</div> 
     </div> 
    </div> 
    <div id="group3" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--base"> 
      <div class="title">ABOUT</div> 
     </div> 
    </div> 
    <div id="group4" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--deep"> 
      <div class="title">RANDOM PICTURE</div> 
     </div> 
    </div> 
    <div id="group5" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--base"> 
      <div class="title">PRODUCTS</div> 
     </div> 
    </div> 
    <div id="group6" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--back"> 
      <div class="title">RANDOM PICTURE</div> 
     </div> 
    </div> 
    <div id="group7" class="parallax__group"> 
     <div class="parallax__layer parallax__layer--base"> 
      <div class="title">CONTACT</div> 
     </div> 
    </div> 
</div> 

JQuery와 :

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('.parallax').animate({ 
        scrollTop: target.offset().top 
       }, 2500); 
       return false; 
      } 
     } 
    }); 
}); 

이 코드의 대부분의 관련 부분입니다 - 당신이 찾을 수있는 휴식 jsfiddle ... http://jsfiddle.net/mgLzejad/1/

체크 아웃 코드와 오류를 찾을 수 있는지 확인 -이 jsfiddle입니다

Answer 1

난 못해 .... : http://jsfiddle.net/mgLzejad/2/

target.offset().top는 $('.parallax')이 얼마나에 따라 상대 값이다 스크롤. scrollTop 값을 수정하려면 현재 스크롤 값 $('.parallax')을 추가하려면

scrollTop: $(target).offset().top + $('.parallax').scrollTop()