JSFiddle - React, Tailwind, and code Playground

by Yunus Gaziev

HTML

<div id="menu">menu</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error magni, accusantium est animi ex obcaecati ab recusandae fugiat nesciunt inventore, incidunt voluptate illum veniam eius modi. Quasi quaerat sit dolorum adipisci tempore nobis laborum odio.</p>
<p>Quisquam voluptate totam a obcaecati asperiores et autem voluptas sint modi suscipit architecto quia sequi dignissimos aspernatur veritatis odio nam tempore est omnis, atque sit blanditiis nisi dicta magnam. Harum voluptatibus iure odit, facere consectetur.</p>
<p>Necessitatibus maiores iure, sunt ullam. Eum minus earum possimus ducimus, laboriosam recusandae soluta velit ex, maxime neque obcaecati! Velit dolorum natus vitae, esse repellat, sit, deserunt nostrum adipisci dolore tempora quia atque aperiam laboriosam. Dignissimos!</p>
<p>Commodi, tempore quia, fugit repellat reiciendis expedita nisi illo alias officiis, enim cumque rerum! Asperiores nostrum fugiat eveniet ea dolore praesentium sit commodi explicabo, cumque dolores, distinctio quasi, modi maiores rem? Quis suscipit deleniti accusamus.</p>
<p>Architecto, harum! Iusto laboriosam voluptatum quasi voluptatem accusantium, dolorum ipsa labore quod pariatur placeat odio dignissimos, quidem aspernatur harum nemo minima ullam numquam eius! Eligendi eveniet mollitia, quaerat error voluptatem esse autem earum, cumque facere.</p>
<p>Consequuntur ab ex similique repudiandae eos rem a vitae cumque quidem, temporibus nemo ipsa minima in consectetur possimus perferendis qui asperiores. Soluta ipsa, dolor alias, quam enim, eveniet architecto autem nulla, ullam ipsam maxime quia.</p>
<p>Asperiores consectetur qui doloribus officiis, soluta, odit ratione architecto dolores iure aliquam est vero accusamus culpa ut suscipit deserunt! Quidem sapiente laboriosam dolore nobis accusamus iusto, omnis deleniti tenetur sunt excepturi, dolorum fuga eum, dolorem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error magni,...

CSS

body {
  padding: 0 15px;
}

#menu {
  background-color: #ccc;
  font-weight: 700;
  font-size: 18px;
  padding: 15px;
  margin-bottom: 15px;
}

#menu.is-fixed {
    position: fixed;
    z-index: 150;
    left: 0;
    width: 100%;
    transform: translateY(-100%);
    
}

#menu.is-ready {
    transition: transform .5s linear;
}

#menu.is-showed {
    transform: translateY(0);
}

.target-block {
  font-weight: 700;
  font-size: 22px;
  padding: 15px;
  background-color: #f1f1f1;
}

JavaScript

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

var menu = $('#menu');
var target_block = $('.target-block');
var target_block_top = target_block.offset().top;

menu.wrap($('<div style="height:' + menu.outerHeight() + 'px;"/>'));

var menuController = debounce(function() {

	if ( window.scrollY >= target_block_top / 2 ) {
    	menu.addClass('is-fixed');
    }
    
    if ( window.scrollY >= (target_block_top / 2) + 10 ) {
    	menu.addClass('is-ready');
    }
    
    if (window.scrollY > target_block_top) {
    	menu.addClass('is-showed');
    }
    
    if (window.scrollY < target_block_top) {
    	menu.removeClass('is-showed');
        
        setTimeout(function() {
        	menu.removeClass('is-fixed is-ready');
        }, 500);
    }
	
}, 100);
window.addEventListener('scroll', menuController);