Код jQuery работает в Safari, но не в Firefox

Хорошо, я заработал! Вам придется взглянуть на мой источник, чтобы увидеть, что я сделал, потому что я так сильно изменился, но в основе вашей проблемы лежит тот факт, что элемент «прокручиваемый» отличается на разных платформах/браузерах.

Иногда это элемент html, иногда это элемент body. Я использовал несколько строк кода из scrollTo Plugin, чтобы позаботиться об этом. . Я использовал CSS для позиционирования песочных часов. И я использовал цветные блоки div, чтобы создать впечатление, что песок движется. Вам больше не нужно обрабатывать события изменения размера браузера (которые свели бы вас с ума в IE, поверьте мне :)

Вот рабочая демонстрация.

Я тестировал в Safari и FF на Mac, но в IE7+ все должно работать корректно.

Вот код jQuery (не включая фрагмент из scrollTo):

<script type="text/javascript">
  $(function(){
    var low      = 28,
        high     = 50,
        max      = 86.5,
        range    = high - low, 
        $mtop    = $("#mask-top"),
        $mbottom = $("#sandy-bottom")
        scroller = $()._scrollable(); // Uses part of the scrollTo plugin

    $(window).scroll(function(e){
      var scrollTop  = $(scroller).scrollTop(),
          bodyHeight = document.body.scrollHeight,
          itemHeight = $('#outline').outerHeight();

      var percentScrolled = scrollTop / (bodyHeight - itemHeight);
      percentScrolled = Math.floor(percentScrolled * 100) / 100;

      var newHeight = (range * percentScrolled);
      newHeight =  Math.floor(newHeight * 10) / 10;

      $mtop.height( (newHeight + low) + "%" );
      $mbottom.css( 'top', (max - newHeight) + "%" );
    })
  })
</script>

Вот обновленный HTML, который я переместил в дочерний элемент body:

<div id="hourglass">
    <img id="outline" src="img/hourglass-outline.png" width="634" height"1080" alt="Hourglass Outline" />
    <!-- A new image I created based on your two-->
    <img id="sandy" src="hourglass-insides.png" width="634" height="1080" />
    <div class="mask" id="mask-top" ></div>
    <img id="sandy-bottom" src="hourglass-insides.png" width="634" height="1080" />
</div>

И для тех, кто хочет посмотреть, вот CSS, который я использовал для позиционирования песочных часов:

<style type="text/css" media="screen">
  #hourglass {
    left: 0; top: 0; bottom: 0; right: 0;
  }
  #outline, #sandy, #sandy-bottom {
    position: fixed;
    top: 0;
    height: 100%;
    left: 50% !important;
    margin: 0;
    margin-left: 215px;
    max-height: 100%;
    min-height: 100%;
    width: auto;
  }

  #sandy {
    top: -32%;
  }

  #sandy-bottom {
    top: 86.5%;
  }

  .mask {
    background: #262B28;
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
  }
  #mask-top {
    top: 0;
    height: 28%;
  }
</style>

Некоторые мысли для размышления:

1. Предпочитайте методы позиционирования jQuery для прямого доступа к значениям CSS. Например, используйте .offset(), .position() и т. д. вместо .css("top"). Методы jQuery более переносимы между браузерами и будут возвращать числа, а не строки. См. http://docs.jquery.com/CSS.

   Показательный пример: topStart = parseInt($('#top-sand').css('top')) выше и многие другие.

2. Если вам необходимо получить метрику позиционирования с помощью атрибута CSS, обязательно

   (1) всегда преобразовывать его в число, например. с parseInt(). Строки JavaScript незаметно преобразуются — или нет — в числа неясными способами. Всегда четко указывайте, что вы хотите рассматривать как число.

   (2) учитывать случай, когда в значении CSS есть единицы, например. как в «100px».

   Пример: var hourglassWidth = $('#hourglass #outline img').css('width') выше.

3. Следите за дробными значениями. В $('#hourglass').css({left:leftMargin+"px"}) выше, что произойдет, если leftMargin не является целым числом (имеет десятичную точку?)

4. Лучше всего использовать firebug в один шаг и наблюдать за переменными позиционирования, когда они меняются от строки к строке, и сравнивать их с вашими ожиданиями.