JSFiddle - React, Tailwind, and code Playground

by yoowordpress

HTML

<div id="nofix">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus dictum dui eu viverra. Phasellus justo dui, faucibus eget magna vel, sagittis mattis ipsum. Duis pharetra molestie ante. Nam in rutrum justo, id ornare orci. Suspendisse et
  sem et odio mattis varius non a tellus. Donec consequat auctor lacus, vitae porttitor nibh auctor non. Nunc vitae leo at lorem fermentum tincidunt adipiscing id enim. Vestibulum mollis tincidunt semper. Ut hendrerit justo magna, vel hendrerit metus
  suscipit a. Donec in ligula vitae purus molestie varius id a justo. Phasellus eleifend odio et mollis bibendum. In tincidunt est malesuada ullamcorper ullamcorper. Suspendisse magna urna, consectetur fringilla lacus tincidunt, tempor pulvinar leo. Pellentesque
  rutrum luctus viverra. Nam blandit augue vel libero ultrices, id molestie risus viverra. </div>
<div id='fixer'>
  тут меню
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus dictum dui eu viverra. Phasellus justo dui, faucibus eget magna vel, sagittis mattis ipsum. Duis pharetra molestie ante. Nam in rutrum justo, id ornare orci. Suspendisse et
  sem et odio mattis varius non a tellus. Donec consequat auctor lacus, vitae porttitor nibh auctor non. Nunc vitae leo at lorem fermentum tincidunt adipiscing id enim. Vestibulum mollis tincidunt semper. Ut hendrerit justo magna, vel hendrerit metus
  suscipit a. Donec in ligula vitae purus molestie varius id a justo. Phasellus eleifend odio et mollis bibendum. In tincidunt est malesuada ullamcorper ullamcorper. Suspendisse magna urna, consectetur fringilla lacus tincidunt, tempor pulvinar leo. Pellentesque
  rutrum luctus viverra. Nam blandit augue vel libero ultrices, id molestie risus viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque rhoncus dictum dui eu viverra. Phasellus justo dui, faucibus eget magna vel, sagittis mattis
  ipsum. Duis pharetra molestie ante. Nam in rutrum justo,...

CSS

#fixer {
  height: 150px;
  width: 100%;
  background: red;
}

.fase {
  margin-top: 10px;
}

JavaScript

(function($) {
  $.fn.myPlugin = function($options) {

    var $target = this,
      $topss = $target.offset().top,
      $settings = $.extend({
        'top': 0
      }, $options);


    //function fixerStop() {
      var $top = $(document).scrollTop();

      if ($top > $topss) {
        $target.css({
          'position': 'fixed',
          'top': $options.top
        });

        return false;
      } else {
        $target.css({
          'position': 'relative'
        });

        return false;
      }
    //}

   // fixerStop();
    
   

  }
})(jQuery);

$('#fixer').myPlugin();

 $(document).scroll(function() {
      $('#fixer').myPlugin();
    });