Question

我试图让我的引导导航栏在某个滚动点变小。我希望它顺利进行所以我使用了transition: 0.5s;。在第一次向下滚动时它并不顺利，但是当我再次这样做时它会顺利进行。有人可以帮我弄这个吗？这是我的jcode

$(window).scroll(function () {
var scrollHeigth = $(this).scrollTop();
if (scrollHeigth === 0) {
 $(".navbar").css({
    'height':'100px',
    'transition':' 0.5s'
});
$('.navbar-logo').css({
    'width':'143px',
    'top' : '10px'
});
} else {
 $(".navbar").css({
   'height':'50px',
});
$('.navbar-logo').css({
   'width':'80px',
   'top' : '3px',
   'transition':' 0.5s'
  });
 }
});

编辑： navbar-logo在第一次滚动时会顺利进行，navbar不会

Answer 1

在样式表中定义transition而不是脚本。它导致了这个问题。

试试<style>

.navbar{
    transition: all ease 0.5s;
 }

Answer 2

您还需要在此处添加转换。因此，转换适用于这两个操作

$digest()

为什么我的转换第一次没有工作jquery / css

2 个答案: