On scroll offset

by Rich Costello

HTML

<div id="content">
    <nav id="nav">Navigation</nav>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    v
    <p>Content</p>
    vv
    
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p><p>Content</p>
    
</div>

CSS

nav {
    position: fixed;
    top: 0;
    width: 100%;
    height: 20px;
    background: #000;
}
.navbar1{
    border-bottom: 2px solid rgba(46,152,255,1)!Important;
}

JavaScript

window.onscroll = function() {
    console.log(window.pageYOffset);
    var nav = document.getElementById('nav');
    if ( window.pageYOffset > 100 ) {
        nav.classList.add("navbar1");
    } else {
        nav.classList.remove("navbar1");
    }
}



document.getElementById("myhexer").style.visibility = "visible";


var nav = document.getElementById('myhexer');
    if (window.pageYOffset) {
      nav.visibility = "visible";
    } else {
      nav.visibility = "hidden";
    }