스크롤 할 때 캔버스 메뉴가 나타나지 않는다.

나는 온라인 (자습서와 비디오)에서 보았던 많은 것들을 시도했지만, 제대로 작동하지 않는 것 같다.스크롤 할 때 캔버스 메뉴가 나타나지 않는다.

내가 가진 것은 100 % 너비와 높이의 상단에있는 영웅 배너입니다. 메뉴는 -webkit-transform을 사용하여 숨겨져 있습니다 : translate (0, -100 %); 사용자가 영웅 배너의 맨 아래로 스크롤하면 메뉴가 표시되고 -webkit-transform을 사용하여 아래로 내려갑니다. translate (0,0); addClass 내에서. 나는 쉽게 애니메이션을 사용했다. 그러나, 내 자바 스크립트가 작동하지 않습니다.

Here is a jsfiddle

$(document).ready(function(){ 

var nav = $(".slide-nav-container"); 
var banner = $(".hero"); 

$(window).scroll(function() { 

    var windowpos = $(window).scrollTop(); 

    if (windowpos >= banner.outerHeight()) { 
     nav.addClass("slide-menu"); 
    } else { 
     nav.removeClass("slide-menu"); 
    } 

});

});

출처

2014-05-12 bsebastian86

우선 'jquery'라이브러리를 추가하지 않았기 때문에 귀하의 바이올린이 작동하지 않습니다. 나는 그것을 추가하고 그것을 작동합니다. 웹 사이트에 jquery를 추가 했습니까? –

안녕하세요 newboyhun, 죄송합니다 jquery를 추가하는 것을 잊었습니다. 그리고 yeh, 그것은 jsfiddle에서 작동하지만 내 사이트에서는 그렇지 않습니다. 예, 사이트에 jquery 라이브러리를 추가했습니다. 내 사이트에서 작업하지 못하게 할 수 있습니까? – bsebastian86

배너의 높이 만 확인하고 있으므로 위치에 추가해야합니다.

windowpos >= banner.outerHeight()+banner.offset().top

banner.offset().top는 높이를 추가하면 배너의 바닥이 될 것입니다, 당신은 귀하의 사이트에 배너의 위치를 반환합니다.

출처

2014-05-12 13:52:40

이것은 여전히 내 사이트에서 작동하지 않습니다. 그것은 바이올린에 똑같은 일을합니다. – bsebastian86

그러면 코드가 더 필요합니다. –

안녕 신보유, 왜 작동하지 않는지 알았어요. 본문 안에는 작은 미디어 쿼리에 사용할 수있는 캔버스 사이드 오프 (side off canvas) 메뉴를 제외한 모든 컨텐트가 들어있는 기본 컨테이너가 있습니다. 이 작업을 수행 할 때 코드가 작동했습니다. 자바 스크립트를 수정하여 본문 대신 주 컨테이너를 보는 방법을 알고 있습니까? – bsebastian86

스크롤 할 때 캔버스 메뉴가 나타나지 않는다.

답변

관련 문제