JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<div class="wrapper">
    <div class="header" title="hello">Header</div>
    <div class="nav">Navigation</div>
    <div class="content">
        <p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll applicake pastry. ...</p>
        <br/>
        <br/>
        <p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll applicake pastry. ...</p>
        <br/>
        <br/>
        <p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll applicake pastry. ...</p>
        <br/>
        <br/>
        <p>Candy canes tart pie biscuit. Cupcake liquorice cake dessert tootsie roll applicake pastry. ...</p>
        <br/>
        <br/>
    </div>
</div>

CSS

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}
.ui-tooltip-content {
    padding: 5px;
    color: pink;
}

JavaScript

$(document).ready(function () {
    $(this).tooltip();
    var stickyNavTop = $('.nav').offset().top;

    var stickyNav = function () {
        var scrollTop = $(window).scrollTop();

        if (scrollTop > stickyNavTop) {
            $('.nav').addClass('sticky');
        } else {
            $('.nav').removeClass('sticky');
        }
    };

    stickyNav();

    $(window).scroll(function () {
        stickyNav();
    });
});