粘性菜单上的css过渡不起作用

时间:2016-09-15 08:56:21

标签: javascript jquery css

我在粘性菜单上遇到动画问题。 CSS已更改,但不会更改。有谁知道为什么?

$(window).scroll(function () {
    if ($(this).scrollTop() > 50) {
        $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky");
    } else {
        $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky");
    }
});

和CSS:

.navbar-fixed-top {
  transition: 0.3 all ease;
  -webkit-transition: 0.3 all ease;
}
.navbar-fixed-top.navbar-fixed-top-sticky {
  background: #601a36;
  height: 80px;
  transition: 0.3 all ease-in-out;
  -webkit-transition: 0.3 all ease-in-out;
}

3 个答案:

答案 0 :(得分:1)

您需要在时间后添加unit0.3无效,必须为0.3s300ms。然后background-color会有效,但对于height转换,您还需要在.navbar-fixed-top css类中添加默认值。



$(window).scroll(function() {
    if( $(this).scrollTop() > 50 ) {
        $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky");
    } else {
        $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky");
    }
});

/* --- just for demo --- */
.navbar-fixed-top {
  position: fixed;
  width: 100%;
  line-height: 20px;
  background: #ccc;
}
.navbar-fixed-top-sticky {
  line-height: 80px;
}
.content {
  height: 1000px;
}
/* --- just for demo --- */

.navbar-fixed-top {
  height: 20px;                             /* default height */
  transition: 0.3s all ease;                /* added unit */
  -moz-transition: 0.3s all ease;           /* added unit */
  -webkit-transition: 0.3s all ease;        /* added unit */
}
.navbar-fixed-top-sticky {
  background: #601a36;
  height: 80px;
  transition: 0.3s all ease-in-out;         /* added unit */
  -moz-transition: 0.3s all ease-in-out;    /* added unit */
  -webkit-transition: 0.3s all ease-in-out; /* added unit */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navbar-fixed-top">.navbar-fixed-top</div>
<div class="content"></div>
&#13;
&#13;
&#13;

答案 1 :(得分:-1)

您没有发生转换的原因是因为您没有为其转换定义初始属性。试试这个。

.navbar-fixed-top {
   transition: 0.3s all ease;
   -webkit-transition: 0.3s all ease;

   background-color: transparent;
   height: 0;
}

.navbar-fixed-top.navbar-fixed-top-sticky {
   background-color: #601a36;
   height: 80px;
}

希望有效!

答案 2 :(得分:-3)

这应该解决它。保留CSS,只排除transition部分。

$(window).scroll(function () {
           if ($(this).scrollTop() > 50) {
              $('.navbar-fixed-top').addClass("navbar-fixed-top-sticky").fadeIn('slow');
           } else {
        $('.navbar-fixed-top').removeClass("navbar-fixed-top-sticky").fadeOut('slow');

    }
         });

或者您可以尝试添加时间单位,就像您应该transitions

一样
.navbar-fixed-top {
       transition: 0.3s all ease;
       -webkit-transition: 0.3s all ease;
    }

   .navbar-fixed-top.navbar-fixed-top-sticky {
       background: #601a36;
       height: 80px;
       transition: 0.3s all ease-in-out;
       -webkit-transition: 0.3s all ease-in-out;
    }