addClass 在 iphone Chrome 上不起作用答案

【问题标题】：addClass doesn't work on iphone ChromeaddClass 在 iphone Chrome 上不起作用
【发布时间】：2018-06-14 20:13:43
【问题描述】：

  // changing navbar background-color by scrolling
  $(window).scroll(function() {
  if ($(this).scrollTop() > 20) {
    $("#tab-nav").addClass("tab-scroll");
  } else {
    $("#tab-nav").removeClass("tab-scroll");
  }
});

.tab-scroll {
  background-color: rgb(255, 255, 255) !important;
}

以上是我的 jquery 和 CSS 代码。我想在导航栏达到一定高度时更改其背景颜色，该代码适用于桌面上的每个浏览器，它也适用于 iPhone safari。但它不适用于 iPhone chrome。你们能帮我修一下吗？有什么技巧可以让代码兼容任何浏览器？

谢谢

【问题讨论】：

对于任何想要进行移动测试的人，here's an example Codepen。它似乎与监听 iOS Chrome 上的滚动有关，因为我似乎无法用$(window).scroll()、$(window).on('scroll')、window.addEventListener('scroll') 以及document 或body 来触发它，而不是window 在每个上面。

标签： jquery css web

【解决方案1】：

使用Vanilla JS:

function scrollFunctions() {
    var
        pageY = window.pageYOffset,
        tab = document.getElementById('tab-nav');

    /** @Sticky Header **/
    if (pageY > 20) {
        tab.classList.add('tab-scroll');
    }
    else if (pageY <= 20) {
        tab.classList.remove('tab-scroll');
    }
}

window.addEventListener('scroll', function () {
    scrollFunctions();
});

【讨论】：

这对我没有任何影响。