Имеет какое-то странное поведение с jQuery $ (window) .scrollTop(); на мобильных телефонах

Question

Я пытаюсь затухать в заголовке своей страницы при прокрутке до определенной точки.

На мобильном телефоне по какой-то причине при прокрутке он не исчезает в определенной точке. Случается, что он не появляется, пока вы полностью не остановите прокрутку, и появится без анимации затухания.

Любая помощь была бы чрезвычайно оценена.

//Header to appear on scroll 
$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 

    if (scroll >= 150) { 
     $('.header-bar-small').fadeIn(); 
    } else { 
     $('.header-bar-small').fadeOut(); 
    } 
}); 

Answer 1

После копаться в проблеме с Деннисом (оговорке: мы работаем вместе, так что я имел преимущество просмотра исходного кода), мы обнаружили решение.

На странице должно было появиться три элемента: один появился на свитке, а остальные не появлялись, пока свиток не остановился. Мы определили, что позиция scrollTop обновлялась и была правильной, и что javascript, который заставляет элементы отображаться, выполняется правильно. Мы даже удалили fadeIn (заменены на show), чтобы удостовериться, что это не была отсроченная проблема рендеринга.

Оказалось, что это проблема с CSS. По какой-то причине мы смогли исправить это, обернув целевой div в другой div только position:fixed и z-index:1. Странно то, что элемент, который мы пытались показать уже, имел эти стили, но по какой-то причине добавление обертки исправляет его.

Например:

<div class="showHideWrapper" style="position:fixed; z-index:1;"> 
    <div class="header-bar-small" style="position:fixed; z-index:1;"> 
     This should work. 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     //Header to appear on scroll 
     $(window).scroll(function() { 
      var scroll = $(window).scrollTop(); 

      if (scroll >= 150) { 
       $('.showHideWrapper').fadeIn(); 
      } else { 
       $('.showHideWrapper').fadeOut(); 
      } 
     }); 
    }); 
</script> 

Мы пытались зачистки стилей на этом элементе, или применяя такое же поведение на совершенно новый элемент, но он не работает, пока мы не делали выше. Установка position:relative или position:absolute не выполняла эту работу, возможно потому, что был также установлен дочерний элемент.

На данный момент это может помочь тем, у кого есть аналогичная проблема, но если кто-то может дать окончательное объяснение причин этого, я все уши.