JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"></script>
<script src="http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js"></script>
<div id='header'>HEADER</div>
<div id='menu-wrap'>
<div id='menu'>MENU</div>
<div class='option-wrap'>
<div id='opt1'>OPTION 1</div>
<div id='opt2'>OPTION 2</div>
<div id='opt3'>OPTION 3</div>
<div id='opt4'>OPTION 4</div>
</div>
</div>
<div id='content'>CONTENT</div>

CSS

#header, #menu, #opt1, #opt2, #opt3, #opt4, #opt5, #content {
    width: 100%;
    line-height: 2em;
    font-size: 200%;
    text-align: center;
}

#header {
    background: #e74c3c;
}

#menu {
    background: #2ecc71;
}

#opt1 {
    background: #f39c12;
}

#opt2 {
    background: #9b59b6;
}

#opt3 {
    background: #95a5a6;
}

#opt4 {
    background: #34495e;
}

#content {
    background: #2980b9;
    height: 1000px;
}

#menu-wrap.stuck {
    position: fixed;
    top: 0;
    width: 100%;
}

JavaScript

$('#menu-wrap').waypoint('sticky');

$(function() {                     
  $('#menu').waypoint(             
    function() {
      console.log("Waypoint reached.");
      //$('.option-wrap').slideToggle();
    }
  )
});

$("#menu").click(function(){
    
    $('.option-wrap').slideToggle();
    
    $('#header').slideToggle('slow');
    
});