2016-09-14 3 views
0

저는 현재 작업하고있는 프로젝트에 대한 도움을 찾고 있는데 알아낼 수 없습니다. 필자는 충돌 스크립트가 없으면서 다양한 스크립트를 검색하고 시도했습니다. 나는 누군가가 나를 도울 수 있기를 바라고 있습니다.오프 캔버스 메뉴/내용으로 앵커 부드러운 스크롤을 구현할 수 없습니다.

페이지의 콘텐츠에 nav에서 앵커하는 단일 페이지가 있습니다. 페이지 중간에 이미지 위로 마우스를 가져 가면 캔버스 해제 페이지로 이동할 수 있습니다. 이 방법이 효과적이지만, 페이지 하단의 기본 탐색을 클릭하면 부드러운 스크롤을하고 싶습니다. 오프 캔버스 앵커와 부드러운 스크롤 스크립트가 함께 작동하지 않는 것 같습니다. 나는 jquery와 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 
     }, 1000); 
     return false; 
    } 
    } 
}); 
}); 

다른 코드가를 그 내 페이지에서 작업 할 수 있습니까? 당신은 여기 내 페이지를 검사 할 수 있습니다 :

http://ebresearch1.wpengine.com/index.html

을 또한, 나는 내 탐색 아이콘 그들에 활성 상태를 갖는 데 문제.

이 코드 사용하고 있습니다 :

jQuery('.nodes a').click(function() { 
jQuery(this).find('.inactive-circle').toggleClass('active hide'); 
}); 

을하지만 그것은 단지 활성 및 비 활성 상태를 전환합니다. 다른 탐색 항목을 클릭하기 전까지 만 활동 상태를 유지하기를 원합니다.

태블릿 문제 : 다른 주에

는, 탐색에 내 모바일/태블릿 햄버거 연결 후 클릭 탐색 닫지 마십시오. 그냥 열려 있습니다. 링크를 클릭 한 후 캔버스를 닫을 수 없습니다.

나는 이것이 많은 정보라는 것을 알고 있지만, 나는 막혀있다. 추가 정보를 제공해야하는 경우 알려 주시면 게시하겠습니다.

감사합니다.

두 번째 문제에 대한
+0

주어진 링크 404 오류 –

+0

나는 링크를 고쳤습니다. 감사합니다! – gdeleon101

답변

0

빠른 하나를 어떻게 든 간단하게 될 수있는 것처럼 느낀다, 그러나이와 주요 원칙은 첫째 만드는 것입니다로 된 div와 CSS를 여기에서 설정하는 방법을

jQuery('.nodes a').click(function() { 
    jQuery('.nodes a').find('.inactive-circle').removeClass('active hide'); 
    jQuery(this).find('.inactive-circle').addClass('active hide'); 
}); 

아주 확실하지 .nodes a 개의 div를 모두 비활성화 한 다음이 항목을 활성화하십시오.

jQuery('#0 a').click(function() { 
    jQuery('#rightBurger').trigger('click'); 
}); 

희망, 꼭 도움 :

세 번째 문제에 대한

,이 메뉴 DIV 클릭 할 때 햄버거에 클릭을 트리거 할 수 있습니다 offCanvas 스크립트를 간섭하지 않도록하지만 해킹의 비트가 뛰지 만 다시 돌아 오지 않고 아무도하지 않으면 다시 시도합니다.

+0

Sam0, 완벽하게 작동했습니다! 감사합니다! 당신의 도움을 주셔서 감사합니다! 첫 번째 문제의 – gdeleon101

+0

나는 스 니펫 (snippet)을 생성하는 CSS 트릭 페이지를 살펴본 다음 구현/디버그가 더 쉬운 것처럼 보이는이 대체 http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll을 발견했습니다. 당신을 위해 더 잘할 수 있습니다. – Sam0

+0

코드를 추가했지만 부드러운 스크롤이 없습니다. – gdeleon101

관련 문제