JSFiddle - React, Tailwind, and code Playground

by OriginalEXE

HTML

<nav class="navigacija"><p>neki text</p></nav>

CSS

body,
html {
    margin: 0;
    padding: 0;
}

body {
    min-height: 800px; /* Samo da se pojavi scroll radi demonstracije */
}

.navigacija {
    background: #666;
    left: 0;
    padding: 10px;
    position: fixed;
    right: 0;
    top: 0;
}

.navigacija p {
    color: #fff;
    font-family: Arial, sans-serif;
}

.navigacija.scrolled {
    background: #eee;
}

.navigacija.scrolled p {
    color: #000;
}

JavaScript

jQuery( function( $ ) {
   
    var $window   = $( window ),
        $document = $( document ),
        $nav      = $( '.navigacija' );
    
    $window.on( 'load scroll', function() {
        
        var scrolled = $document.scrollTop();
        
        if ( scrolled > 0 ) {
         
            $nav.addClass( 'scrolled' );
            
        } else {
            
            $nav.removeClass( 'scrolled' );
            
        }
        
    });
    
});