Jquery - 固定フローティング要素とアニメーション背景

Question

Jquery For Designer（http://jqueryfordesigners.com/fixed-floating-elements/）の固定フローティングスクロールエフェクトにアニメーション背景を統合しようとしています。 JFiddleはここにいる（http://jsfiddle.net/Chadimoglou/pTBCW/1/）。概念的に私がしたいのは、あなたがNavを過ぎてスクロールし、背景がゆっくりと消えていくページの上部に固定されているときです。スクロールして元の場所の灰色のボックス（イメージプレースホルダ）背景が消えてしまいます。私は3つの問題に直面している。

1. すぐにNavの背景が表示されています。 H1をスクロールするとポップインします。
2. 背景が滑らかにアニメーション化されません。
3. スクロールバックするとバックグラウンドが消えません。

Answer 1

ここは私のfiddleです。まず、私が行ったことは、別のdivに背景を置き、そのdivの不透明度をアニメーション化することでした。この方法で、css3を使用しないブラウザでも動作します。

また、if文にさらに多くの検証を追加しました。ヘッダーがすでに修正されていれば、試してアニメーション化することはありません。

HTML：

<div id="header"> 
    <H1>LoremIpsum</H1> 
</div> 
<div id="content"> 
    <div id="image"> 
     LoremIpsum 
    </div> 
    <div id="navWrapper"> 

     <ul id="nav"> 
      <li><a href="http://www.christiancoronato.com/">Home</a></li> 
      <li><a href="http://www.christiancoronato.com/pictures/">Pictures</a></li> 
      <li><a href="http://www.christiancoronato.com/contact/">Contact</a></li> 
      <li><a class='tester1' href="http://www.christiancoronato.com/shows/">Shows</a></li> 
      <li><a class='tester' href="http://www.christiancoronato.com/about/">Bio</a></li> 
     </ul> 
     <div class='navBackground'></div> 
    </div> 
    </div> 
</div> 

JS：

$(document).ready(function() { 
    var top = $('#nav').offset().top - parseFloat($('#nav').css('marginTop').replace(/auto/, 0)); 
    $(window).scroll(function (event) { 
    //return false; 

     // what the y position of the scroll is 
    var y = $(this).scrollTop(); 

    // whether that's below the form 
    if (y >= top && !$('#nav').hasClass('fixed')) { 
     // if so, ad the fixed class 
     $('#nav, .navBackground').addClass('fixed'); 
     $('.navBackground').css('margin-top','0'); 
     $('.navBackground').stop().animate({"opacity":1}, "slow"); 

    } else if(y < top && $('#nav').hasClass('fixed')) { 
     // otherwise remove it 
     $('.fixed').removeClass('fixed'); 
     $('.navBackground').css('margin-top','-40px'); 
     $('.navBackground').stop().animate({"opacity":0}, "slow");   

    } 
    }); 
}); 

CSS：

body { 
    background: url('http://dl.dropbox.com/u/62537/header.jpg') top center repeat; 
margin: 0;    
    display: block; 
    height: 1500px; 
} 
#header { 
    background: url('http://dl.dropbox.com/u/62537/headerBG.jpg') center repeat-x; 
    font-size:3em; 
    padding: 20px 0; 
    height: 40px; 
    display: block; 
    overflow: hidden; 
    margin: 0 0 10px; 
    -webkit-box-shadow: 0px 0px 4px 0px #000; 
    -moz-box-shadow: 0px 0px 4px 0px #000; 
      box-shadow: 0px 0px 4px 0px #000; 

} 
H1 { 
    position: relative; 
    top: -5px; 
} 
H1, #content { 
    margin: 0 auto; 
    width: 720px;  
} 
#image { 
    background-color: #555; 
    height: 180px; 
    width:720px; 
    display: block; 
    overflow: hidden; 
} 
#plug { 
    opacity: 0; 
    background-color: #777; 
    color: #FFF; 
    padding: 0.5em; 
} 

#navWrapper { /* required to avoid jumping */ 
    position: relative; 
    width: 600px; 

} 
#nav { 

    /* just used to show how to include the margin in the effect */ 
    padding: 10px 0; 
    font-size: 1.25em; 

    list-style: none outside none; 
    overflow: auto; 
    width: 600px; 
    z-index:1; 

/* 
    position: relative; 
*/ 
} 
.navBackground{ 
    background: url('http://dl.dropbox.com/u/62537/fadeBG.png'); 
    width: 600px; 
    padding: 20px 0; 

    opacity:0; 
    filter:alpha(opacity=0); 
} 

.notfixed{ 

} 

.fixed { 
    position: fixed; 
    top: 0; 
    z-index:-1; 
    margin-top:0; 
} 
#nav li { 
    float: left; 
    padding-right: .5em; 
}