Jquery - 固定浮动元素和动画背景

Posted 2023-05-08

【中文标题】Jquery - 固定浮动元素和动画背景

【英文标题】：Jquery - Fixed Floating Elements and Animated Background

【发布时间】：2012-04-14 10:06:09

【问题描述】：

我正在尝试将动画背景与来自 Jquery For Designers (http://jqueryfordesigners.com/fixed-floating-elements/) 的固定浮动滚动效果集成。 JFiddle 在这里（http://jsfiddle.net/Chadimoglou/pTBCW/1/）。从概念上讲，我想要发生的是当您滚动过去导航并将其固定到页面顶部时，背景将慢慢淡入。当您向后滚动并且导航停止在灰色框下方的原始位置时（图像占位符）背景将淡出。我遇到了 3 个问题。

导航的背景即将显示。滚动经过 H1 后，它就会弹出。 背景动画不流畅。 当您向上滚动时，背景不会消失。

有什么想法吗？

【参考方案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;

【讨论】：

嘿，你用过这个吗。让我知道这是否是您要找的。​​span>

嘿科尔，非常感谢您的帮助！实际上我还没有使用它，因为在完成那个项目之前我有点走神了。也就是说，我将在本周的某个时候实施它，因为我的日程安排已经开放了一点。