How to hide html element on ios?

Question

css

On ios, it is not possible to hide an element when scrolling the page. What needs to be done to make it work?
When scrolling, changing the background of the menu works. But logo 1 (white logo) is not hidden. But black (logo 2) appears. On Android everything is ok. The problem is on ios, both on safari and on chrome.

Script:

<script>
    var currentScrollPosition = 0;
    $(window).scroll(function() {
      var newScrollPosition = $(this).scrollTop();
      if (newScrollPosition > currentScrollPosition) {
        // меняем класс по скроллу вниз

        $('.logo1').addClass('disable');
        $('.logo1').removeClass('activatble');
        $('.logo2').addClass('activatble');
        $('.logo2').removeClass('disable');

      }
  
      var newScrollPosition2 = $(this).scrollTop();
      if (newScrollPosition2 == 0) {
        // меняем класс по скроллу вверх
        
        $('.logo1').addClass('activatble');
        $('.logo1').removeClass('disable');
        $('.logo2').addClass('disable');
        $('.logo2').removeClass('activatble');

      

      }
      currentScrollPosition = newScrollPosition;
    
    });
    
  </script>

The code:

<a class="navbar-brand  logo1 activatble" href="#"><img src="photos/logo.png" style="height:30px; margin-right:5px;"></a>
<a class="navbar-brand  logo2 disable" href="#box"><img src="photos/logo2.png" class="" style="height:30px; margin-right:5px;"></a>

CSS:

.activatble {
  display: contents;
}
.disable {
  display: none!important;
}

Website: buy-humidifier.rf

Answer 1

You check the browser, if safari - hide the element.
If you need something only on mobile - check the permission
Browser check

Answer 2

You can try with a media query like this:

.logo1 {
  display: block
}
.logo2 {
  display: none
}
@media (max-width:320px) {
.logo1 {
  display: none
}
.logo2 {
  display: block
}
}

Less code and no js needed. Moreover, your bootstrap weighs so much