Question

在滚动过去时以及从窗口顶部244像素点之前，无法在功能上设置动画高度（在执行动画方法时出现奇怪的延迟）。当排除其他流量时，功能的第一个动画方法起作用。

else {
$('.header').animate({height:"151px"});
$('.nav').animate({top:"151px",height:"93px"});
}

我想知道最简单的方法是让标题和导航类动画回原始大小，并且在没有延迟的情况下从else流程中指定的顶部开始。

感谢。

     <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
    body {
    margin: 0; 
    background: green;
    }
    .wrapper {
    margin: 0px auto;
    width: 960px;
    }
    .header {   
    top: 0; 
    height: 151px; 
    width: 100%; 
    background: black; 
    color: white; 
    position:fixed;
    z-index: 1;
    }
    .nav {
    top: 151px; 
    height: 93px; 
    width: 960px; 
    background: red; 
    position: fixed;
    z-index: 1;
    }
    .content {
    background: blue;
    height: 2000px;
    top: 244px; 
    position: relative;
    }
    </style>
    <script src="http://code.jquery.com/jquery-1.7.2.js"></script>
    </head>
<body>
    <div class="header">
    </div>
    <div class="wrapper">
        <div class="nav">
        </div>
        <div class="content">
        </div>
    </div>      
<script>
onscroll = function (){
if ($(window).scrollTop() > 244) {
    $('.header').animate({height:"93px"});
    $('.nav').animate({top:"93px",height:"58px"});
    }
else {
    $('.header').animate({height:"151px"});
    $('.nav').animate({top:"151px",height:"93px"});
    }   
}
</script>
  </body>
</html>

onscroll animate其他固定位置问题

0 个答案: