Safari에서이 동작이 발생하는 이유는 무엇입니까?

Question

먼저 크롬과 사파리로 펜으로 문제를 직접 확인해보십시오. 여기

펜입니다 : http://codepen.io/anon/pen/jmYJaJ#anon-login

페이지를 아래로 스크롤 따라, 네비게이션 바에 숨길해야하며, 당신이 이동하면 다음이 나타납니다. 그것은 크롬 기대 작품으로

크롬 :

사파리 :

JS 내가이 문제를 해결 않으며 왜 발생합니까 어떻게

var scroll = $(document).scrollTop(); 
var headerHeight = $('.navbar-default').outerHeight(); 
$(window).scroll(function() { 
    var scrolled = $(document).scrollTop(); 
    if (scrolled > scroll) { 
     $('.navbar-default').addClass('nav-up'); 
    } else { 
     $('.navbar-default').removeClass('nav-up'); 
    } 
    if (scrolled > headerHeight) { 
      $('.navbar-default').addClass('nav-white'); 
     } else { 
      $('.navbar-default').removeClass('nav-white'); 
     } 

    scroll = $(document).scrollTop(); 
}); 

되어 사용하고 있습니다 ?

Answer 1

jQuery 창 높이와 관련하여 사파리 및 다른 브라우저와 불일치가 있습니다.

에 JS 변경 :

이 window.innerHeight을 수용하기 위해 오프셋 계산이이 줄 여기 변경 유일한입니다

var scroll = $(document).scrollTop(); 
var headerHeight = $('.navbar-default').outerHeight(); 
$(window).scroll(function() { 
    var scrolled = $(document).scrollTop(); 
    if (scrolled > scroll) { 
    $('.navbar-default').addClass('nav-up'); 
    } else { 
    $('.navbar-default').removeClass('nav-up'); 
    } 
    if (scrolled > headerHeight) { 
    $('.navbar-default').addClass('nav-white'); 
    } else { 
     $('.navbar-default').removeClass('nav-white'); 
    } 

    scroll = $(document).scrollTop() + window.innerHeight == $(document).height(); 
}); 

:

scroll = $(document).scrollTop() + window.innerHeight == $(document).height(); 

CodePen : https://codepen.io/anon/pen/pPpBrb