向下滚动时CSS导航栏转换是平滑的,但向上滚动时根本没有转换

我目前正在一个网站上工作,在屏幕顶部有一个导航栏,当你第一次访问该网站时,它最初是透明的,但当你开始向下滚动时,它会变成一个带有黑色文本的白色栏。它也缩小了一点。它有一个非常好的平滑过渡,因为它改变了它的颜色和缩小,但当你滚动回页面顶部,没有更多的平滑过渡,而是一个瞬间丑陋的过渡。实际上,将颜色改回透明似乎没问题,但调整条的大小缺少过渡。我上传了一个 GIF格式 所以你可以知道到底是什么问题。

我想问第二个问题。正如您在GIF中看到的,文本悬停时有一个下划线动画,但是,我无法让它在白色导航栏上工作。我希望下划线变成黑色,就像文本一样,并与导航栏的其余部分一起缩小。

这是GIF:

https://media.giphy.com/media/5jYbvzN9OzaVm3IRE6/giphy.gif

还有CSS:

    /* -=-=-=-=-=   FONT IMPLEMENTATION   =-=-=-=-=- */

@import url('https://fonts.googleapis.com/css?family=Quicksand:300|Roboto:100');


/* -=-=-=-=  END FONT IMPLEMENTATION   =-=-=-=- */

html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}

body {
      font-family: "Roboto",sans-serif;
      font-weight: lighter;
}

header.index {
      width: 100%;
      height: 100vh;
      background: url(../res/images/back.png) no-repeat 50% 50%;
      background-size: cover;
}

header.page1 {
      width: 100%;
      height: 100vh;
      background: url(../res/images/test.jpg) no-repeat 50% 50%;
      background-size: cover;
}

.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
}

.logoimg {
      position: fixed;
      display: inline-block;
      float: left;
      width: 235px;
      height:54px;
      margin: 37px 80px;

       transition: 0.5s ease-in-out;
}



nav {
      position: fixed;
      width: 100%;
      line-height: 60px;
      transition: 0.5s ease-in-out;
}

nav ul {
      line-height: 100px;
      list-style: none;
      background: rgba(0, 0, 0, 0);
      overflow: hidden;
      color: #fff;
      padding: 0;
      text-align: right;
      margin: 0;  
      padding-right: 50px;
      transition: 0.5s ease-in-out;
}



nav ul li {
      display: inline-block;
      padding: 16px 20px;
       transition: 0.5s ease-in-out;
}

nav ul li a {
      text-decoration: none;
      color: #fff;
      font-size: 24px;
       transition: 0.5s ease-in-out;
}



nav ul li a.current{
    font-weight: 600;



}


nav.scrolled{
  background: #fff;
  min-height: 20px;

  line-height: 40px;
   transition: 0.5s ease-in-out;
}

nav.scrolled ul li a{
  text-decoration: none;
      color: #000;
      font-size: 20px;

      line-height: 40px;
       transition: 0.5s ease-in-out;
}
nav.scrolled img{
   width: 180px;
      height:  41px;
      margin: 27px 80px;
      transition: 0.5s ease-in-out;
}





/* -=-=-=-=-=   MENU ITEM HOVER ANIMATION   =-=-=-=-=- */


.menu a {
      transition: color 0.1s, background-color 0.1s;

}

.menu a {
    position: relative;
    display: block;


    transition: color 0.1s,background-color 0.1s,padding 0.2s ease-in;
    color: #fff;
}

.menu a::before {
    content: '';
    display: block;
    position: absolute;
    bottom: 24px;
    left: 0;
    height: 2px;
    width: 100%;
    background-color: #fff;
    transform-origin: right top;
    transform: scale(0, 1);
    transition: color 0.1s,transform 0.2s ease-out;
}
.menu a:active::before {
    background-color: #fff;
}
.menu a:hover::before, a:focus::before {
    transform-origin: left top;
    transform: scale(1, 1);
}


.menu.scrolled {
    color: #000;
    background-color: 
}
/* -=-=-=-=-=  END MENU ITEM HOVER ANIMATION   =-=-=-=-=- */

以及JS:

 $(window).on("scroll", function() {
            if($(window).scrollTop()) {
                  $('nav').addClass('scrolled');
            }

            else {
                  $('nav').removeClass('scrolled');
            }
      })

             $(function () {
                $(window).scroll(function () {
                    if ($(this).scrollTop()> 2) {

                        $('.logo img').attr('src', 'res/logos/main.png');

                    }
                    if ($(this).scrollTop() < 2) {

                        $('.logo img').attr('src', 'res/logos/main_light.png');
                    }
                });
            });

以及重要的HTML:

<header class="index">

                  <nav class="navbar">

                        <div class="logo">
                             <a href="#">
                                    <img class="logoimg" src="res/logos/main_light.png">
                              </a>

                        </div>



                        <div class="menu">
                              <ul>
                                    <li><a class="current" href="index.html">Home</a></li>
                                    <li><a href="page1.html">Company</a></li>
                                    <li><a href="#">Services</a></li>
                                    <li><a href="#">Portfolio</a></li>
                                    <li><a href="#">Blog</a></li>
                                    <li><a href="#">Contact</a></li>

                              </ul>
                        </div>
                  </nav>

            </header>

请注意 .滚动 是一个改变导航栏一旦你滚动。愿你的路把你引向温暖的沙滩!