Question

我正在尝试使用javascript函数来修复scrollup上的标题的一部分。它工作正常，但我想通过添加CSS3的过渡属性使固定部分的运动平滑。我试过但它不起作用。请求你的帮助PLZ。

       window.onscroll = myFunction;

    function myFunction() {

        if(document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
            document.getElementById("hdr_nav").style.position = "fixed";

        } else {
            document.getElementById("hdr_nav").style.position = "";
        }

     }//end function

   *{margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; }

    body {height: 3000px;}


    .hdr_box {float: left; width: 100%; height: 65px; background: #eff1f2; position: relative; padding: 0; margin: 0;}

    

    .hdr_box > .row1 {

        float: left;
        width: 100%;
        height: 20px;
        padding: 15px;
        }

    nav {
        float: left;
        width: 100%;
        height: auto;
        background: #e4e6e8;
        position: relative;
        transition: all 1s;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        }


    nav ul {
        list-style: none;
        float: left;
        width: 100%;
        padding: 0;
        margin: 0;
        }


    nav ul li {
        float: left;
        width: auto;
        border-right: solid 1px #cacaca;
        }

    nav ul li a {
        float: left;
        width: auto;
        padding: 16px;
        text-align: center;
        font-size: 14px;
        }

<div class="hdr_box" id="hdr">

    <div class="row1" id="hdr_row1"><h3>CompanyName</h3></div>

</div>


    <nav id="hdr_nav">

        <ul>
        <li><a href="">About Us</a></li>
        <li><a href="">Business</a></li>
        <li><a href="">Our Work</a></li>
        <li><a href="">Challenges</a></li>
        </ul>


    </nav>

Answer 1

添加新的CSS规则

.nav-fixed {
  position: fixed;    
  -webkit-animation: slideInDown  450ms 1 ease-in-out;    
}

@-webkit-keyframes slideInDown {
  from {transform: translate(0%, -100%); }
  to {transform: translate(0%, 0%); }
}

修改您的js代码

   //document.getElementById("hdr_nav").style.position = "fixed";
   document.getElementById("hdr_nav").classList.add("nav-fixed");
} else {
   //document.getElementById("hdr_nav").style.position = "";
   document.getElementById("hdr_nav").classList.remove("nav-fixed");

https://jsfiddle.net/13m8u7xm/

Answer 2

这是因为您将position属性从absolute更改为fixed且无法动画/转换。转换仅适用于具有单元的属性，例如。 px，rem，％或不透明度之类的东西。

您可以使用关键帧动画修复它：

nav.is-fixed {
  position: fixed;
  animation: scroll .5s ease-out;
}

@keyframes scroll {
  from {
    transform: tranlateY(-100%);
  }

  to {
     transform: tranlateY(0%);
  }
}

如果需要，请务必为@keyframes和transform添加前缀。

JS的一点变化：

window.onscroll = myFunction;

function myFunction() {
    var scrollAmount = document.body.scrollTop || document.documentElement.scrollTop;
    var nav =  document.getElementById("hdr_nav");

    if(scrollAmount > 200) {
       nav.classList.add('is-fixed');   

    } else {
        nav.classList.remove('is-fixed');
    }

 }

https://jsfiddle.net/41nspon8/3/

CSS3过渡不适用于JS scrollup固定div过渡

2 个答案: