是什么导致Safari中的这种行为？

Question

尝试使用Chrome和Safari浏览器来查看问题。

以下是笔：http://codepen.io/anon/pen/jmYJaJ#anon-login

向下滚动页面时，导航栏应隐藏，然后如果向上滚动，则应显示。它在Chrome中正常运行

铬：

Safari中：

我正在使用的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窗口高度方面，safari和其他浏览器存在差异。

将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