JSFiddle - React, Tailwind, and code Playground

by Ravshanbek778

HTML

<div id="menu" class="default"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed accusantium obcaecati maiores iste. Doloremque, ex consequuntur iure suscipit dolorum. Voluptatem facere aliquam alias iste quod odio repudiandae animi aut, magni sed similique corporis perspiciatis enim debitis id nemo provident, dolorum expedita eveniet doloribus porro esse dolore velit quaerat. Minus iste, velit ad fugit cupiditate magnam vel, eum natus distinctio dolorem, accusantium quidem. Minima suscipit sunt soluta. Ipsa eum inventore libero nostrum hic temporibus doloremque vel ullam veniam minus, eius esse iusto similique quas fugiat optio odit, quidem quod. Illo repellendus veniam quam fugit, exercitationem similique nostrum, eum distinctio nulla ut ab, sit aperiam doloribus minus! Voluptatum perferendis veniam ipsa nulla recusandae animi ut atque fugit necessitatibus quam quia perspiciatis quisquam, laborum accusantium illum nihil, voluptates sed quis facilis corporis officiis non iure provident, vero. Aut qui molestias saepe ratione vel, sunt maiores assumenda numquam in, architecto ut quod sequi ex quas consequuntur vitae iusto. Ullam aliquid velit veniam libero odit delectus quae, quam voluptatum sunt sequi eligendi nisi sint sapiente ipsam reprehenderit accusamus, dolorum. Est dolor officia deserunt temporibus aspernatur, ea ratione consequuntur doloremque doloribus. Quo, pariatur temporibus veniam explicabo voluptatum aspernatur at aperiam eius iure quasi. Sint ducimus soluta perspiciatis enim praesentium rem rerum omnis numquam eos exercitationem, harum vel neque corrupti dolore dolorem possimus quas animi ea totam magnam, nisi illum? Deserunt deleniti excepturi doloribus temporibus. Architecto eligendi doloribus impedit necessitatibus quo ipsa, quas earum ratione aperiam iusto itaque soluta ab quos nisi totam non aut sunt vel perferendis! Saepe perferendis vitae, doloremque minima, iusto laboriosam animi suscipit, eveniet quia qui ipsam ipsa...

CSS

#menu {
height: 50px;
background-color: tomato;
width: 100%;
}

#menu.fixed{
  position: fixed;
  top: 0;
  left:0;
}

JavaScript

document.addEventListener("DOMContentLoaded", onDOMReady);
 var menu = document.getElementById('menu');
function onDOMReady() {
  window.addEventListener('scroll', onWindowScroll)

 

  function onWindowScroll() {
    if(window.document.scrollingElement.scrollTop > 150){
      menu.classList.add("fixed");
    }
    else { 
      menu.classList.remove("fixed")
    }
  }
}