.css（）或addClass（）/ removeClass（）不能在Safari中应用？ （jQuery的）

Question

我要排除故障的脚本是否不应用其分配的类或样式是否有特定原因？我尝试了不同的方法（试图获得相同的结果），但到目前为止没有任何效果……

第一次尝试： 这是我最初尝试使用.toggleClass()（在Firefox和Chrome中工作，但并未在所有Safari上启动）：

$(document).ready(function() {
  var $window = $(window);
  var div2 = $('#pgnav');
  var div1 = $('#container2');
  $window.on('scroll', function() {
    var scrollTop = document.documentElement.scrollTop;
    var viewport_height = $window.height();
    var scrollTop_bottom = scrollTop + viewport_height;
    var window_top_to_div2 = ($window.height() - div2.height()) / 2;
    var div1_top = div1.offset().top;
    var div1_height = div1.height();
    var div1_bottom = div1_top + div1_height;
    div2.toggleClass('show', scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2));
  });
});

此外，这是CSS的摘录：

#pgnav {
  visibility: hidden;
  opacity: 0;
}

#pgnav.show {
  visibility: visible;
  opacity: 1;
}

---

第二次尝试：然后，我以.toggleClass() / .addClass()的价格购买.removeClass()，（仍然没有运气）：

$(document).ready(function() {
  var $window = $(window);
  var div2 = $('#pgnav');
  var div1 = $('#container2');
  $window.on('scroll', function() {
    var scrollTop = document.documentElement.scrollTop;
    var viewport_height = $window.height();
    var scrollTop_bottom = scrollTop + viewport_height;
    var window_top_to_div2 = ($window.height() - div2.height()) / 2;
    var div1_top = div1.offset().top;
    var div1_height = div1.height();
    var div1_bottom = div1_top + div1_height;
    if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {
      div2.addClass('show')
    } else {
      div2.removeClass('show');
    }
  });
});

---

第三次尝试：：最后，我尝试使用.css()代替.addClass() / .removeClass()，但它在Safari中仍然没有响应：

if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {
  div2.css('display', 'inline');
} else {
  div2.css('display', 'none');
}

---

第四次尝试：：根据此帖子，我尝试了以下其他方法：https://stackoverflow.com/a/11325039/9214076，（但仍然没有运气！）：

if (scrollTop >= (div1_top - window_top_to_div2) && (scrollTop + window.innerHeight) <= (div1_bottom + window_top_to_div2)) {
  div2.css('display', 'inline').parent().addClass("dummyClass").removeClass("dummyClass");
} else {
  div2.css('display', 'none').parent().addClass("dummyClass").removeClass("dummyClass");
}

为什么Safari无法运行这些脚本变体中的任何一个？尽管手头的任务似乎很简单，但似乎没有任何解决办法...

另外，要查看操作的完整摘要，建议您在此处访问我的上一篇文章：Can toggleClass Work in Safari? (JQuery)