Question

我正在尝试为我的网站（www.loveyoga.co）上的标题导航创建一个流畅的动画，以便它在高度上缩小，徽标在整体尺寸上缩小。我已按照site上的说明进行操作，但动画并不流畅，只有向下滚动一小部分，如果向下滚动很多，动画根本不会发生。标题导航确实成功改变了大小，所以我知道它的一面有效，它只是没有的动画。

我正在使用CSS来进行大小更改和转换，我使用javascript将.sticky类添加到需要更改的各种类中，一旦向下滚动。

这是javascript：

  // Sticky Menu
$(window).on('scroll', function () {
    if ($(window).scrollTop() > 1) {
        $('.sticky-menu').addClass('sticky');
        $('.site-logo').addClass('sticky');
        $('.nav-menu').addClass('sticky');
        $('.site-header').addClass('sticky');
    } else {
        $('.sticky-menu').removeClass('sticky');
        $('.site-logo').removeClass('sticky');
        $('.nav-menu').removeClass('sticky');
        $('.site-header').removeClass('sticky');
    }

    if ($(window).scrollTop() > 750) {
        $('.sticky-menu').addClass('sticky-scrolled')
    } else {
        $('.sticky-menu').removeClass('sticky-scrolled')
    }
});

这是css更新（在我的Wordpress子主题style.css中）：

    .header.sticky {
  position: fixed;
  top: 0px;
  left: 0;
  right: 0;
  z-index: 999999;
  height:40px;
  line-height: 40px;
}

.header {
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

.site-logo{
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
}

.nav-menu{
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;
  }

.site-logo.sticky {
max-width: 130px;
height: 40px;
line-height: 40px;
}

.nav-menu.sticky li a {
height: 40px;
line-height: 40px;
font-size: 12px;
}

.site-header.sticky {
height: 40px;
line-height: 40px;
}

.site-header{
  -webkit-transition: all 0.5s ease !important;
  -moz-transition: all 0.5s ease !important;
  -o-transition: all 0.5s ease !important;
  -ms-transition: all 0.5s ease !important;
  transition: all 0.5s ease !important;

如果有人能看一下我的网站，看看是否有什么想法，我将非常感激。

非常感谢提前！

网站标题动画不平滑，仅出现在第一个滚动中

0 个答案: