JSFiddle - React, Tailwind, and code Playground

by notme

HTML

<div id="nav">
    <div class="scrollable">
        <ul>
            <li><a href="#" title="foo">Foo</a></li>
            <li><a href="#" title="foo">Foo</a></li>
            <li><a href="#" title="foo">Foo</a>
                <ul class="submenu">
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                    <li><a href="#">Submenu</a></li>
                </ul>
            </li>
            <li><a href="#" title="foo">Foo</a></li>
            <li><a href="#" title="foo">Foo</a></li>
        </ul>
    </div>
</div>

CSS

ul {
    padding-top:10px;
}

li {
    float:left;
    padding:10px;
    list-style:none;
    background:red;
    position:relative;
}

#nav {
    height:300px;
    background:blue;
}

.scrollable {
    height:1200px;
    background: green;
}

.fixed {
    position:fixed;
}

.submenu {
    display:none; 
    position:absolute;
    top:30px;
    left:0;
}

li:hover .submenu {
    display:block;
}

JavaScript

var $nav = $('ul');

$(window).scroll(function () {
    var win = $(window);
    var scrolltop = 10;
    console.log(win.scrollTop());
    if (win.scrollTop() >= scrolltop) {
        $nav.addClass('fixed');
    } else {
        $nav.removeClass('fixed');
    }
});

$('#nav').on('click', 'a', function(e){
    alert('click');
    e.preventDefault();
});