Kaydırma animasyon menüsünde

Pencere kaydırma konumuna bağlı olarak jQuery üst menüsünde oluşturmaya çalışıyorum. $ (Selector) .css ("height", "value") kullandığımda; her şey yolunda ama bunu canlandırmayı denediğimde, doğru çalışmıyor. İşte benim kodum. Yardım ettiğin için teşekkür ederim.Kaydırma animasyon menüsünde

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<style> 
</style> 
<body> 
    <nav style="background-color:red; height:100px;" class="navbar-fixed-top navbar navbar-default my-navbar"> 
    </nav> 
    <div style="width:100%; height:2000px; background-color:blue;" class="content"> 
    </div> 

    <script> 
     $(document).ready(function(){ 
      $(window).scroll(function(){ 
       var top=$(window).scrollTop(); 
       if(top>10){ 
        $(".my-navbar").animate({height: '50px'}, "slow"); 
       }else{ 
        $(".my-navbar").animate({height: '100px'}, "slow"); 
       } 
      }) 
     }) 
    </script> 
</body> 
</html>

kaynak

2016-03-30 dendi181

İlk Çözüm: animation için

kullanım stop():

$(window).scroll(function(){ 
var top=$(window).scrollTop(); 
if(top > 10){ 
$(".my-navbar").stop().animate({height: '50px'}, "slow"); 
}else{ 
$(".my-navbar").stop().animate({height: '100px'}, "slow"); 
} 
})

jsFiddle

İkinci Çözüm:

Kullanım addClass ve removeClass:

$(window).scroll(function(){ 
var top=$(window).scrollTop(); 
if(top > 10){ 
$(".my-navbar").addClass('NavBar2'); 
}else{ 
$(".my-navbar").removeClass('NavBar2'); 
} 
})

jsFiddle

kaynak

2016-03-30 08:32:20 Pedram

sorun tam olarak değil onun çalışmıyor, onun sadece "onun beklendiği gibi çalışmıyor", çünkü eğer Bir süreliğine işini bırak. Sorun, animasyonu tekrar denediğinizde önceki animasyonun hala devam ediyor olmasıdır. Bunu

yardımcı Umut jquery yöntemi durdurma()

if(top>10){ 
    $(".my-navbar").stop().animate({height: '50px'}, "slow"); 
}else{ 
    $(".my-navbar").stop().animate({height: '100px'}, "slow"); 
}

arayarak ilk önceki animasyonu durdurmak gerekebilir

kaynak

2016-03-30 08:39:47 Mayday

Kaydırma animasyon menüsünde

cevap

İlgili konular