CSS3 geçişi JS scrollup sabit div geçişi üzerinde çalışma değil

Question

Kaydırma üzerinde başlığın bir kısmını düzeltmek için javascript işlevi deniyordum. İyi çalışıyor ama CSS3'ün geçiş özelliğini ekleyerek sabit parçanın düzgün hareket etmesini istiyorum. Denedim ama çalışmıyor. Yardımınızı isteyin 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

position özelliğini absolute ile fixed arasında değiştirdiğinizden ve bu, animasyonlu/geçişli olamaz. Geçişler sadece bir ünite ile ilgili özellikler için çalışır, örn. px, rem,% veya donukluk gibi şeyler.

Bir anahtar kare animasyon ile ancak bunu düzeltebilirsiniz:

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

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

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

gerekirse @keyframes ve transform kullandığınızdan emin olun.

Ve JS biraz değişiklik:

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/

Answer 2

yeni CSS kuralı

.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%); } 
} 

eklemek için js kodu değiştirmek

//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/