Jquery - фиксированные плавающие элементы и анимированный фон

Question

Я пытаюсь интегрировать анимированный фон с эффектом Fixed Floating Scroll из Jquery For Designers (http://jqueryfordesigners.com/fixed-floating-elements/). JFiddle здесь (http://jsfiddle.net/Chadimoglou/pTBCW/1/).) Концептуально, что я хочу, это когда вы прокручиваете мимо Навигация, и она фиксируется в верхней части страницы, фон будет постепенно исчезать. Когда вы прокручиваете назад, и навигационная панель останавливается на своем первоначальном месте под серым квадратом (заполнитель изображения), фон исчезает. 3 проблемы.

1. Фон навигатора скоро появится. Как только вы прокрутите H1, он появится.
2. Фон не анимируется плавно.
3. Фон не исчезает при прокрутке назад.

Есть идеи?

Answer 1

Вот моя скрипка . Сначала я поместил фон в отдельный 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;
}