JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div id="navigation"></div>

CSS

body{
    height:10000px;
}

#navigation{
    display:block;
    width:100%;
    height:40px;
    position:fixed;
    top:0;
    left:0;
    background:#333;
    opacity:.3;
}

#navigation.black{
    opacity:.8;
}

JavaScript

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll > 200) {
        $("#navigation").addClass("black");
    }
    else {
        $("#navigation").removeClass("black");
    }
}



/*

var top = $('#header-ovr').offset().top - parseFloat($('#header-ovr').css('margin-top').replace(/auto/, 0));
 $(window).scroll(function (event){
   var y = $(this).scrollTop();
     
     var header = $('#header-ovr').offset().top - y,
         onePos = $("#one").offset().top - y;

     if(header > onePos){
        $('#header-ovr').addClass("top");
     } else{
        $('#header-ovr').removeClass("top");
     }
 });
 
 */