В меню анимации прокрутки

Я пытаюсь создать в верхнем меню jquery, с высотой в зависимости от положения прокрутки окна. Когда я использую $ (селектор) .css («высота», «значение»); все в порядке, но когда я пытаюсь сделать это с помощью анимации, это не работает правильно. Вот мой код. Спасибо за вашу помощь.В меню анимации прокрутки

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

источник

2016-03-30 dendi181

Первое решение:

использование stop() для animation:

$(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

Второе решение:

Использование addClass и removeClass:

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

jsFiddle

источник

2016-03-30 08:32:20 Pedram

Проблема не совсем ее не работает, его просто "его не работает, как ожидалось", так как если вы оставьте его на некоторое время, он выполняет свою работу. Проблема в том, что предыдущая анимация все еще работает, когда вы пытаетесь снова ее оживить. Вам может понадобиться, чтобы остановить предыдущую анимацию путем вызова метода Jquery остановки()

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

Надеется, что это помогает

источник

2016-03-30 08:39:47 Mayday

В меню анимации прокрутки

ответ

Смежные вопросы