Question

我正在尝试使用jQuery和CSS的混合物，当您向下滚动页面时，沙漏中的沙子似乎会流动。我基本上有两个'沙子'图像，并在用户滚动时使用jQuery来更改容器的高度。

<!-- Load jQuery -->
  <script src="jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>

  <!-- Handle Hourglass Scrolling -->
  <script type="text/javascript" charset="utf-8">
   $(document).ready(function(){

    // Set value of topStart and bottomStart to equal to y-position of the equivilent divs
    var topStart = parseInt($('#top-sand').css('top'));
    var bottomStart = parseInt($('#bottom-sand').css('top'));

    // Calculate the maximum height of the sand relative to the window size
    var sandHeight = $(window).height()*0.22;

    // setValues sets positions based on window size
    function setValues() {
     topStart = parseInt($('#top-sand').css('top'));
     bottomStart = parseInt($('#bottom-sand').css('top'));
     sandHeight = $(window).height()*0.22;
     var hourglassWidth = $('#hourglass #outline img').css('width');
     var leftMargin = $(window).width()*0.5+ 320;

     $('#top-sand').height(22+"%");
     $('#top-sand img').height(sandHeight)
     $('#bottom-sand img').height(sandHeight)
     $('#hourglass').css({left:leftMargin+"px"})
     $('#trace').text(hourglassWidth)


     // contentMarginLeft = $('#hourglass #outline').width();
     //  $('#content').text(contentMarginLeft);
     // css({"margin-left": contentMarginLeft + "px"});
    };

    setValues();

    // This listens for a window scroll event and then handles the height and position of the sand in the Hourglass
       $(window).scroll(function () {

     // Calculating the position of the scrollbar
     var doc = $("body"), 
         scrollPosition = $("body").scrollTop(),
         pageSize = $("body").height(),
      windowSize = $(window).height(),
      fullScroll = pageSize - windowSize;
         percentageScrolled = (scrollPosition / fullScroll);

     // Calculating the Y-positions of the two sand piles
     var topPosition = topStart+(22*percentageScrolled);
     var bottomPosition = bottomStart-(22*percentageScrolled);

     // Updating the sand piles
          $('#top-sand').height(22-(22*percentageScrolled)+"%")
           .css({top: topPosition+"%"});
      $('#bottom-sand').height(22*percentageScrolled+"%")
          .css({top:bottomPosition+"%"});

       });

    // This listens for a window resize event and then reconfigures the layout
    $(window).bind('resize', function() {
     // Reconfigure layout
    });

     });
  </script>

它在Safari中运行良好（尽管每次都会出现一个小故障，顶部图像的高度发生变化，但它的位置却没有变化），但它根本没有在Firefox中运行。您可以在此处查看该网站http://www.chris-armstrong.com/ticktalk

我对jQuery很新，所以如果它是一个完整的noob错误就道歉。

提前致谢。

Answer 1

好的，我搞定了！你将不得不查看我的源代码，看看我做了什么，因为我改变了很多，但你的问题的基础是因为“可滚动”元素在不同的平台/浏览器上是不同的。

有时它是html元素，有时它是body元素。我使用scrollTo Plugin中的几行代码来处理这个问题。我用CSS来定位沙漏。我用彩色的div块给出了沙子移动的外观。您不再需要处理浏览器大小调整事件（这会让您在IE中疯狂，相信我：）

以下是working demo。

我在Mac上测试了Safari和FF，但它应该在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>

Answer 2

要思考的一些想法：

首选jQuery的定位方法直接访问CSS值。例如，使用.offset()，.position()等代替.css("top")。 jQuery的方法在浏览器中更容易移植，并且会返回数字，而不是字符串。请参阅http://docs.jquery.com/CSS。

一个例子：topStart = parseInt($('#top-sand').css('top'))以及其他许多人。
如果您必须通过CSS属性获取定位指标，请务必

（1）始终将其转换为数字，例如与parseInt()。 JavaScript的字符串以晦涩的方式无声地转换 - 或不转换为数字。始终要明确您想要将其视为数字。

（2）考虑CSS值中有单位的情况，例如：如'100px'。

示例：var hourglassWidth = $('#hourglass #outline img').css('width')以上。
注意小数值。在上面的$('#hourglass').css({left:leftMargin+"px"})中，如果leftMargin不是整数（有小数点？）会发生什么？
您最好的选择可能是单步使用萤火虫，并观察定位变量，因为它们会逐行变化，并与您的预期进行比较。

jQuery代码在Safari中工作，但不是Firefox

2 个答案: