1

Cannot functionally animate height of header (weird delay in execution of the animate method) when scrolling past and before the point of 244pixels from top of window . First animate method of the functioon works when the else flow is excluded.

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

I would like to know whats the simplest way to have the header and nav classes animate back to original size and distance from top specified in the else flow without a delay.

Thanks.

     <!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>
4

0 回答 0