JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/imakewebthings/jquery-waypoints/master/waypoints.min.js"></script>
<script src="https://raw.github.com/imakewebthings/jquery-waypoints/master/shortcuts/sticky-elements/waypoints-sticky.min.js"></script>
<div id="top-nav">TOP NAV</div>
<div id="secondary-nav">SECONDARY NAV
    <div class="wrap"><a href="#" class="trigger">&#9776;</a></div>
</div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget justo eget lorem eleifend auctor a ac quam. Fusce eget placerat libero. Proin sagittis eros ac purus ultricies a imperdiet lacus dignissim. Nulla convallis, arcu id posuere tempor, risus nisl varius sapien, non ultrices est ligula fermentum risus. Maecenas a molestie nulla. Phasellus tincidunt semper porttitor. Vestibulum et est elit. Nam id libero dolor. Donec eget est nec magna dapibus iaculis placerat non dui.

Fusce quis sollicitudin mi. Praesent eget eros id orci aliquet pellentesque. Etiam orci purus, eleifend quis ornare quis, egestas eget ligula. Mauris vestibulum congue nisi vel auctor. Maecenas vel lacinia arcu. In suscipit nulla id ante euismod vel eleifend massa fringilla. Morbi dictum nunc eget ante condimentum vel interdum risus tempor. Donec quis massa a ligula convallis ornare eget nec mi.

Fusce scelerisque lorem id risus sagittis euismod. Integer nec tortor vel arcu consequat luctus. Donec porta orci id ligula commodo nec iaculis nulla aliquam. Proin porttitor ante lacus, et tincidunt urna. Praesent et ante sed purus mattis porttitor. Quisque rutrum adipiscing lorem, id consectetur urna ornare non. Proin mattis pretium sem, nec ultrices purus vestibulum quis. Praesent tempus tristique arcu non mattis. Nullam non viverra mauris. In elementum dictum felis, vel egestas velit dignissim quis.

Donec tortor neque, porttitor vel tempor eu, ultricies vitae erat. Aenean commodo venenatis tortor vel condimentum. Integer mi quam, sollicitudin ac mattis in, bibendum et nunc. Integer sed nibh id...

CSS

body { background:#f4f4f4; margin:0; padding:0; }
#top-nav { background:#333; color:white; height:50px; position:fixed; width:100%;top:0;z-index:9;}

.sticky-wrapper {
    margin-bottom: 20px;
    margin-top: 50px;
}

#secondary-nav { background-color:white; height:150px; width:100%;}
#secondary-nav.stuck {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: -50px;
    z-index: 1;
}

#secondary-nav.clicked {
    top: 50px;
}
.wrap {
    position:relative;
    height:150px;
}
.trigger {
    bottom: 40px;
    cursor: pointer;
    left: 48%;
    margin-bottom: 0;
    position: absolute;
}
#content { height:2000px;
}

JavaScript

$('#secondary-nav').waypoint('sticky', {
    offset: -50
});

$(".trigger").click(function(event) {			 
    if($("#secondary-nav").hasClass('stuck')) {
        $("#secondary-nav.stuck").toggleClass('clicked');
        $.waypoints ('refresh');        
    }    
    return false;
});

$('#secondary-nav').waypoint(function() {
    $(this).removeClass('clicked');
});