addClass不适用于iphone Chrome

Question

  // 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;
}

Above are my code for jquery and CSS. I want to change the background color of navbar whenever it reaches a certain height, the code works on every browser in desktop, and it also works on iPhone safari. but it doesn't work on iPhone chrome. Can you guys help me fix it? is there any trick that can make the code compatible for any browser?

thank

Answer 1

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