javascript - 修复了 header 在一个版本的 jquery 代码中无法正常工作的问题，为什么我的第二个版本在 Firefox 中如此缓慢？

Question

这里首先是一个测试页面的链接:http://www.mindevo.com/tests/tacos.html

编辑:我也设置了一个 jsfiddle 来玩它:http://jsfiddle.net/E4Uav/1/

因此，我在主要功能 div 上设置了具有固定背景的页面。以下是页面设置的基本框架:

<div class="main"></div>
<div class="game2 dark"></div>
<div class="game3 dark"></div>
<div class="gave4 dark"></div>

这是该设置的相应 css:

.main{
  position: relative;
  width: 100%;
  height: 15em;
  background: white url('../images/tacobg.png') no-repeat fixed 0 0;
  padding-top:1em;
}
.game2, .game3, .game4 {
  height:13.3333em;
  width:100%;}
.game2 {background:rgb(0,51,16) url('../images/potatobackground.png') no-repeat 0 0em;}
.game3 {background-color: rgb(0, 1, 82);}
.game4 {background-color: rgb(255, 80, 0);}
.dark {opacity: .5;} 

现在一切正常了。然后我添加了一些 javascript 来告诉下一个 div 在到达某个点时淡入，当我添加 javascript 时，某些东西就会被破坏。

这种情况仅发生在 Chrome 中(也检查了 Chrome Canary)，但不会发生在 Firefox 中。当您向下滚动时，淡入会完美发生。现在，当您由于某种原因向上滚动时，背景暂时不再固定，您会一直向上滚动，并且图像上方会出现一些空白(这是“主”div 的背景颜色，而不是整个页面的背景颜色)。

这是我用来淡入“game2”div 的 javascript:

$(document).ready(function() {
   $(window).scroll(function() {
      if ($(window).scrollTop() > 100 ){

         $('.dark').addClass('show');

      } else {

         $('.dark').removeClass('show');

        };    
   });
});

编辑:所以为了解决这个错误，我学习了一种不同的方法来实现我想要做的事情......

这是我的新 javascript，它会跳过添加/删除类(转换确实很奇怪，并且在 Chrome 中触发时非常慢，但它似乎有效):

$(document).ready(function(){
 $(window).scroll(function(){
  $('.dark').each(function(i){

   var half_object = $(this).position().top + ($(this).outerHeight()/2);
   var bottom_window = $(window).scrollTop() + $(window).height();
   var bottom_object = $(this).position().top + $(this).outerHeight();

   if(bottom_window > half_object){
    $(this).animate({'opacity':'1'},200);
   }
   else if(bottom_object > $(window).scrollTop()) {
    $(this).animate({'opacity':'.5'},200);
   }
  });
 });
});

它可能需要一些加速，现在在 Firefox 中这需要永远发生，使用“dark”类的第二个和第三个在相当长一段时间内没有改变其不透明度。以至于它会让用户交互变得烦人。

造成这种延迟的原因是什么？如何加快这段代码的速度，以便它在 div 显示一半时触发，然后当它位于视口(viewport)顶部或底部下方时，它会淡回到 50% 不透明度？

Answer 1

我不认为你做错了什么。看起来像是 Chrome 中的一个错误？对我来说，它会在 Chrome 中延迟后自行修复，并且不会在 IE 中发生。