Как скрыть html элемент на ios?

Question

[di882210]

На ios не получается скрыть элемент при прокрутке страницы. Что нужно сделать чтобы он отрабатывал?
При прокрутке работает изменение бэкграунда меню. А вот лого 1 (белый логотип) не скрывается. Но черный (лого 2) появляется. На Android все ок. Проблема именно на ios как на safari так и на chrome.

Скрипт:

<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>

Код:

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

Сайт: купить-увлажнитель-воздуха.рф

Answer 1

[Александр]

Проверяешь браузер, если сафари - скрываешь элемент.
Если нужно что бы только на мобильных - проверяешь разрешение
Проверка браузера

Answer 2

[Andrej Sharapov]

Можете попробовать через медиа запрос, вроде этого:

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

Меньше кода и js не нужен. Тем более ваш бутстрап и так много весит

Comments

[di882210]

проблема не в разрешении экрана, а в том что при прокрутке в ios не срабатывает display:none для .logo2