JSFiddle - React, Tailwind, and code Playground

by rajeevRF

HTML

<nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky sticky-dark navbar-light" data-hola='hi'>
    asdsdsdsdsdsdsdsdsdsdsdsdsd
</nav>

CSS

body{height:1000px;}
.sticky {
	background: yellow;
	padding: 50px;
}
.nav-sticky {
	position: sticky;
	position: -webkit-sticky;
	top: 0;
}

JavaScript

$(document).ready(function() {
    $(window).scroll(function() {

        var scroll = $(this).scrollTop();
        console.log($('.nav').data('hola'))
        if (scroll >= 50) {
            $("nav").addClass("nav-sticky");
        } else {
            $("nav").removeClass("nav-sticky");
        }
    });

})