Jquery - Fixed Floating Elements and Animated Background

Question

I'm trying to integrate an animated background with the Fixed Floating Scroll effect from Jquery For Designers (http://jqueryfordesigners.com/fixed-floating-elements/). JFiddle is here(http://jsfiddle.net/Chadimoglou/pTBCW/1/). Conceptually what I want to happen is when you scroll past the Nav and it fixes to the top of the page the background will slowly fade in. When you scroll back and the Nav stops back in its original place below the gray box (image placeholder) the background will fade back out. I'm encountering 3 problems.

1. The background of the Nav is showing up to soon. Once you scroll past the H1 it pops in.
2. The background doesn't animate smoothly.
3. The background doesn't go away when you scroll back up.

Any ideas?

Answer 1

Here's my fiddle. First off what I did was put the background on a separate div and just animate the opacity of that div. this way it will work on browsers with out css3.

I also put more validation in the if statements so it wont try and animate if the header is already fixed.

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;
}