Question

我目前正在一个网站上，该网站的导航栏位于屏幕顶部，当您首次访问该网站时，导航栏最初是透明的，但是当您开始向下滚动时，它会变成带有黑色文本的白色栏。它也会缩小一点。当它改变颜色和缩小时，它具有非常好的平滑过渡，但是当您滚动回到页面顶部时，没有平滑过渡，而是瞬间丑陋的过渡。实际上，将颜色重新更改为透明似乎可以，但是调整条的大小缺少过渡。我上传了 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>

请注意，滚动后， .scrolled 会更改导航栏。愿你的路带领您到温暖的沙滩！

Answer 1

您要为Example元素设置两次过渡。首先为a，然后为.menu a。导航栏在向上滚动时会显示动画，但过渡持续0.1秒，如选择器nav ul li a所声明。

您可以将.menu a更改为.menu a，也可以重新设计课程。

对于下划线动画，只需将.menu nav ul li a选择器添加到您已有的类中，例如：nav.scrolled并更改背景颜色。您可能还需要重新放置nav.scrolled .menu a::before元素。

CSS Navbar过渡在向下滚动时很平滑，但在向上滚动时根本没有过渡

1 个答案: