Waypoints 리사이즈 문제를 사용하는 끈적 Nav

Question

내 클래스 프로젝트 용 사이트를 개발하는 중이고 끈적 거리는 탐색을 구현하기 위해 중간 지점을 사용하고 있습니다. 페이지로드시의 네비게이션은 ViewPort의 하단에 위치하며, 웨이 포인트가 네비게이션 바가 뷰포트의 상단을 눌렀 음을 감지하면 위로 스크롤합니다. "nav-is-sticky"클래스를 적용합니다. 웨이 포인트를 다시 스크롤하면 다시 웨이 포인트를 감지합니다 그것을 올바른 위치에 놓습니다.

내 문제는 창 크기 조정에서 발생합니다. 무엇이 잘못되었는지 알고 있습니다. 나는 얼굴을 쳐다보고 있어도 해결 방법을 찾아 낼 수 없습니다. 페이지를 아래로 내리고 탐색이 뷰포트 상단에 "고정"된 후 창 크기를 조정하면 waypoints 함수가 다시 실행되고 탐색이 뷰포트의 맨 위에 걸리므로 히트가 트리거되어 다시 저장됩니다 원래 위치.

문제는 여기에서 볼 수 있습니다. 아래로 스크롤하면 영웅 이미지가 보이지 않고 크기가 조정됩니다. 여기 http://www.digitaldripmedia.com/web_campaign_project

는 CSS를

.nav-global-bar { 
position: absolute; 
background-color: $dark-gray; 
height: 4.25em; 
width: 100%; 
top: 0; 
} 
.nav-is-sticky { 
position: fixed; 
top: 0; 
} 

이며, 여기에 어떤 도움이 많이 나는 더 나은 청소기 방식으로이 작업을 수행의 방법뿐만 아니라 감사

var windowH = $(window).height(); 
    var navH = $('nav').height(); 





function navPos() { 
    windowH = $(window).height(); 
    navH = $('nav').height(); 
    var nav = $('nav'); 

    if (!nav.hasClass('nav-is-sticky')) { 
     // positions nav bar at bottom of viewport 
    nav.css({ 
     top: windowH - navH 
    }); 
    } 

    nav.waypoint(function(direction) { 
    if (direction == 'down') { 
     // if nav bar hits top of viewport apply nav is stick class 
     nav.addClass('nav-is-sticky'); 
     $('.nav-is-sticky').css({ 
     top: 0 
     }); 
    } else if (direction == 'up') { 
     //remove nav is sticky class when scrolling back up and put back to original spot 
     nav.removeClass('nav-is-sticky'); 
     if (!nav.hasClass('nav-is-sticky')) { 
     nav.css({ 
      top: windowH - navH 
     }); 
     } 
    } 
    }); 
} 

navPos(); 

$(window).resize(function() { 
    if(!$('nav').hasClass('nav-is-sticky')) { 
    navPos(); 
} 
}); 

JQuery와에게 있습니다 jquery에 아직 새로운 감사합니다!

Answer 1

움직이는 물체에 웨이 포인트를 고정하려고하면 거의 원하지 않는 결과가 발생합니다. nav 대신에 main 요소에서 .waypoint() 함수를 호출하면 효과를 얻을 수 있습니다. 그러면 웨이 포인트가 실제로 페이지의 스크롤 레벨에있을 때만 트리거됩니다.

또한 navPos 내에서 waypoint() 함수를 호출하고 있지만 그와 같이 반복해서 다시 초기화 할 필요는 없습니다. 초기 .waypoint() 호출을 외부로 옮기고 페이지로드시 발생하게하십시오.

편집 : 조금 더 테스트했는데 초기 솔루션이 실제로 원하는 효과가 아닐 수도 있습니다. 그렇지 않은 경우 waypoints sticky-positioning shortcut을 살펴보십시오. 너에게 필요한 것을 줄 수도있다.