JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top" style="width: 100%; height: 100px; background: #ccc; margin: 0;">Top Panel</div>

<div id="mainMenuBarAnchor"></div>
<div id="mainMenuBar" style="width: 100%; height: 30px; background: #999; margin: 0;">Sticky Panel</div>

<div id="content" style="width: 100%; height: 3000px; background: #ccc; margin: 0;">
    Content Panel
    <br/>
    <br/>
    This panel will not jump when the sticky panel becomes stuck.
</div>

CSS

.stick {
    position: fixed;
    top: 0;
}

JavaScript

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $mainMenuBar = $('#mainMenuBar'),
        $mainMenuBarAnchor = $('#mainMenuBarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $mainMenuBarAnchor.offset().top;
        if (window_top > div_top) {
            // Make the div sticky.
            $mainMenuBar.addClass('stick');
            $mainMenuBarAnchor.height($mainMenuBar.height());
        }
        else {
            // Unstick the div.
            $mainMenuBar.removeClass('stick');
            $mainMenuBarAnchor.height(0);
        }
    });
});