iPhone 6s plus, проблема прокрутки липкого заголовка iPhone X - PullRequest
Новая
       70

iPhone 6s plus, проблема прокрутки липкого заголовка iPhone X

0 голосов
/ 09 ноября 2019

По умолчанию в строке заголовка логотип, меню, значки поиска и корзины отображаются белым цветом с прозрачным фоном. когда пользователь прокручивает страницу вниз, строка заголовка превращается в белый фон, а логотип, значки меню, поиска и корзины меняются на черный цвет. Но когда пользователь прокручивает назад к верхней панели заголовка, он не переходит в исходное состояние. Это происходит только в iPhone 6s plus (версия программного обеспечения 12.3.1) и iPhoneX в браузере Safari, Chrome и Firefox.

Here is shopify website link: https://jamesay.com/blogs/stories/chasing-the-great-white-shark following issue found in iphone X, iphone 6s plus in all android device and other iphone device and desktop working fine. Вот ссылка на сайт магазина: https://jamesay.com/blogs/stories/chasing-the-great-white-shark следующая проблема обнаружена в iphone X, iphone 6s plus во всех устройствах Android и других устройствах iphone и на рабочем столе.

Javascript 

  $(window).scroll(function() {
    if ($(this).scrollTop() > 150) {
      $('.header-top').addClass('stuck');
      $('.james').hide();
      $('.ays').show();
    } else {
      $('.header-top').removeClass('stuck');
      $('.james').show();
      $('.ays').hide();
    }
  });

CSS 

.header-top {
    padding: 15px 20px;
    position: fixed;
    top: 35px;
    width: calc(100% - 70px);
    z-index: 12345;
    transition: 1s;
    margin: 0 auto;
    left: 0;
    right: 0;
    background-color: transparent;
}

.header-top.stuck {
    transition: 1s;
    background-color: #F2F2F2;
}

HTMl 

  <div class="header-top clearfix">
    <h1 class="l-left">
      <a href="/">
       svg logo image
      </a>
    </h1>
    <a class="toggle-menu nav-hmenu menu_middle {% if template != 'index' and template != 'blog' and template != 'article' %} blk {% endif %} fadein href="javaScript:void(0);">
      <i></i>
      <i></i>
      <i></i>
    </a>
    <a class="l-right count{{ cart.item_count }} fadein">
      svg cart image
      svg search icon image
      {% if cart.item_count > -1 %}
        <div id="CartCount" class="site-header__cart-count" style="{% if template != 'index' and template != 'blog' and template != 'article'%} color: #000000; {% else %} color: #FFFFFF; {% endif %};">
          <span>{{ cart.item_count }}</span>
        </div>
      {% endif %}
    </a>
  </div>

Примечание. Вышеупомянутая проблема связана с тем, что в iPhone 6s plus (версия программного обеспечения 12.3.1) и iPhoneX цвет фона: прозрачный не работает ...

...