<style>
nav{
position: fixed;
width: 100%;
background: red;
height: 10px;
opacity: 0.1;
transition: opacity 1s;
}
nav.nav{
opacity: 1;
}
</style>
<body style="height: 500px">
<nav id="nav"></nav>
<script>
window.onscroll = function() {
nav.classList.toggle('nav', window.pageYOffset > 0);
};
</script>