<style> *{ margin: 0; padding: 0; } body{ height: 1000px; } .nav{ background: #2dae2d; text-align: center; transition: all 2s; } ul{ list-style: none; overflow: hidden; } li{ float: left; margin-left: 50px; } li a{ line-height: 100px; color: aliceblue; } .fixed{ position: fixed; background: #2daedd; width: 100%; } .fixed a{ color: #2dae2d; } </style> * * * * * <div class="nav" id="nav"> <ul> <li><a>home</a></li> <li><a>home</a></li> <li><a>home</a></li> <li><a>home</a></li> </ul> </div> <script> window.onload = function (){ var nav= document.getElementById("nav"); document.onscroll = function(){ var sTop = document.documentElement.scrollTop; if(sTop>0){ nav.className = "nav fixed"; } else{ nav.className = "nav"; } } } </script>