scrollTop 갑자기 끈적 메뉴에 대한 작동하지 않습니다

Question

나는 사이트의 전체 빌드에 대해 아무런 문제없이이 작업을했습니다. 그런 다음, 내가 시작하기로되어 있던 날, 끈적 끈적한 메뉴가 올바르게 작동하지 않게되었습니다. 메뉴는 맨 아래부터 시작하여 맨 위로 스크롤 한 다음 스틱 (위치 : 고정)으로되어 있습니다.

이제 약 10 픽셀 스크롤 한 다음 맨 위로 이동합니다. scrollTop 거리가 올바르게 계산되지 않는 이유는 무엇입니까? http://adammarshalltherapy.com

에서

라이브 사이트는 여기에 끈적 메뉴에 대한 코드입니다. 또한 JS를 사용하여 창 높이에 대한 div의 최소 높이를 설정했지만이 코드는 여기에 포함하지 않았습니다.

$(function(){ 
    var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top; 

    $(window).scroll(function(){ 
      if($(window).scrollTop() > stickyRibbonTop) { 
        $('#wrapper-wcf53badf7ebadf7').css({position: 'fixed', top: '0px', 'background-image':'url(http://amarshall.360zen.com/wp-content/uploads/2014/07/menu-fade-background2.png)'}); 
        $('#block-bcf53bf14093931c').css({display: 'block'}); 
      } else { 
        $('#wrapper-wcf53badf7ebadf7').css({position: 'static', top: '0px','background-image':'none'}); 
        $('#block-bcf53bf14093931c').css({display: 'none'}); 
      } 
    }); 
}); 

미리 도움을 청하십시오! 나는 JS 나 jQuery 전문가가 아니기 때문에 정리를위한 제안은 감사 할 만하다.

참고 :이 사이트는 워드 프레스를 기반으로하므로 충돌 방지 모드가 적용됩니다.

Answer 1

최소 높이를 $('big-div')으로 설정하기 전에 고정 메뉴 기능을 초기화한다고 생각합니다.

페이지로드시 메뉴는 상단에서 54px에서 시작하므로 offset().top 값을 stickyRibbonTop으로 저장하면 54px로 저장됩니다. 그런 다음 스크롤 이벤트에서이 이벤트와 비교합니다.

코드에서 divs의 min-height을 먼저 설정 한 다음 나중에이 스크립트를 실행 해보십시오. stickyRibbonTop의 값은 올바른 값이어야합니다.

곰 당신은 아마이 끈적 메뉴 기능을 명명 된 기능을하고 wrapper_height 함수의 마지막에 전화해야 있도록, stickyRibbonTop에게 window.height()가 업데이트 될 때마다 다시 설정해야합니다 생각한다.

function stickyNav() { 
    var stickyRibbonTop = $('#wrapper-wcf53badf7ebadf7').offset().top; 

    $(window).unbind('scroll', scrollEvent); 
    $(window).on('scroll', stickyRibbonTop, scrollEvent); 
}; 

function scrollEvent(event) { 
    var stickyRibbonTop = event.data; 
    if ($(window).scrollTop() > stickyRibbonTop) { 
     $('#wrapper-wcf53badf7ebadf7').css({ position: 'fixed', top: '0px', 'background-image': 'url(http://www.adammarshalltherapy.com/wp-content/uploads/2014/07/menu-fade-background2.png)' }); 
     $('#block-bcf53bf14093931c').css({ display: 'block' }); 
    } 
    else { 
     $('#wrapper-wcf53badf7ebadf7').css({ position: 'static', top: '0px', 'background-image': 'none' }); 
     $('#block-bcf53bf14093931c').css({ display: 'none' }); 
    } 
}; 

function wrapper_height() { 

    var height = $(window).height(); 
    var wrapperheight = height - 75; 
    wrapperheight = parseInt(wrapperheight) + 'px'; 
    $(".bigDiv").css('min-height', wrapperheight); 
    $("#wrapper-wcf53bad125d7d9a").css('height', wrapperheight); 

    stickyNav(); 
} 
$(function() { 
    wrapper_height(); 
    $(window).bind('resize', wrapper_height); 
});