Fancybox와 부드러운 스크롤 충돌 "맞춤 콘텐츠 추가"

Question

CSS 트릭에서 "부드러운 스크롤"을 사용하여 내 페이지 (부트 스트랩 3) 웹 사이트를 탐색합니다. 그리고 팬시 박스를 사용하여 포트폴리오 항목을 표시하고 있습니다.

지금 모두 잘 작동하는지, 전까지 나는

내 생각 (포트폴리오 항목의 컨텐츠를 보유하고) 사업부에서 데이터와 fancybox에 표시되는 데이터를 추가하려고이 충돌 JQuery와의 모두 (Smoothscroll 때문에 및 Fancybox)는 앵커 태그를 사용합니다.

다음

<script type="text/javascript"> 
    $(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) { 
        $('html,body').animate({ 
         scrollTop: target.offset().top 
        }, 500); 
        return false; 
       } 
      } 
     }); 
    }); 
</script> 

가 fancybox 스크립트가 fancybox을로드하고 클래스를 트리거 그게 전부이며, 별도의 사업부에서 콘텐츠를 가져도 스크립트 : 여기

는 smoothscroll 스크립트입니다. 나는 smoothscroll 스크립트를 주석

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".fancybox").fancybox(); 
    }); 
</script> 


<!--FANCYBOX DISPLAY CONTENT FROM DIV --> 
<script type="text/javascript"> 
    $(".fancybox").fancybox({ 
     openEffect : 'none', 
     closeEffect : 'none', 
     afterLoad : function() { 
      this.inner.prepend('<h1>1. My custom title</h1>'); 
      this.content = '<h1>2. My custom title</h1>' + this.content.html(); 
     } 
    }); 
</script> 

는 fancybox 잘 작동합니다. 그래서 그것은 매끄러운 스크롤이어야합니다.

어떻게 해결할 수 있습니까?

smoothscroll을 사용하지 그래서 당신은의 fancybox의 작동을 여기에 웹 사이트를 볼 수 있습니다

는 : http://www.baasdesign.nl/responsive/

Answer 1

클래스, 예를 들어 당신이 멋진 내용을 숨기 '멋진 콘텐츠를'당신은 fancybox의 링크를로드하기 전에 아래의 예에서와 같이 수행 : "없음 표시를"이유

/* element bifore load */ .fancy-content{ display: block; /*not none*/ height: 0px; overflow: hidden; visibility: hidden; } /* element after load in fancybox inner */ .fancybox-inner .fancy-content{ height: auto; overflow: hidden; visibility: visible;} 

하나는 스크롤, 스크롤 내용의 폭과 높이를 모르고 있다는 것입니다, 그것을 확인하지 않습니다 요소가 표시되지 않기 때문입니다. :-) 나는이 도움을 희망한다!