Safariでこの現象が発生する原因は何ですか？

Question

ChromeとSafariでペンを試して、問題を最初に確認してください。ここで

はペンです：http://codepen.io/anon/pen/jmYJaJ#anon-login

ページを下にスクロールすると、ナビゲーションバーが非表示にすると、あなたが上にスクロール場合は、その後、それが表示されます。これは、Chromeで予想される著作物として

クローム：

サファリ：

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を変更する：

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(); 
}); 

ここで変更する唯一のことは、この行は、あるwindow.innerHeightに対応するためにオフセットを計算し、それは次のとおりです。

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

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