2016-04-14 29 views
1

Aşağıda, geri arama fonksiyonu ile jquery animation kullanıyorum kodun bir kısmı.Geri arama fonksiyonu ile jquery animasyonu kaydırma çalışmıyor

top:-141px ile top:-141px ile top:-141px ile animasyon uygulamak istiyorum bu animate ve top:-63px ile.

$(window).scroll(function() { 
 
    if ($(this).scrollTop() > 1){ 
 

 
    $("#header").animate({ 
 
     position: 'fixed', 
 
     top: '-141px', 
 
    },function(){ 
 
     $(this).animate({ 
 
     position: 'fixed', 
 
     top: '-63px', 
 
     }) 
 
    }); 
 
    } 
 
});
*{ 
 
    margin:0; 
 
    padding:0 
 
} 
 

 
#header{ 
 
    height:141px; 
 
    background:#333; 
 
    color:#fff; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<header id="header"> 
 
    Header section 
 
</header> 
 

 
<div> 
 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
</div>

cevap

1

animasyon yöntemi kodunuzu `position gibi özelliği desteklediğini, bu yüzden hızlı cevap için o

$(window).scroll(function() { 
 
    if ($(this).scrollTop() > 1) { 
 

 
    $("#header").stop(true).css({ 
 
     position: 'fixed' 
 
    }).animate({ 
 
     top: '-141px', 
 
    }, function() { 
 
     $(this).animate({ 
 
     top: '-63px', 
 
     }) 
 
    }); 
 
    } 
 
});
* { 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
#header { 
 
    height: 141px; 
 
    background: #333; 
 
    color: #fff; 
 
} 
 
div { 
 
    height: 1000px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 
<header id="header"> 
 
    Header section 
 
</header> 
 

 
<div> 
 
</div>

+0

sayesinde ayarlamak için css kullanmak ama güle gelmez üstbilgi, her kaydırmayı canlandırır. –

+0

@Maddy, çünkü bir kaydırma işleyicide "if ($ (this) .scrollTop()> 1) {' ile eşleştiniz çünkü ihtiyacınızı karşılayacak bir ayar bulmalısınız. –

İlgili konular