JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae recusandae nihil id porro culpa neque nobis at eaque impedit dicta autem optio odit voluptas! Ea obcaecati quos amet dolore nemo ex similique a consequatur cumque alias tempore itaque praesentium debitis eum quaerat ullam ut fuga labore quia fugiat earum dolorem quisquam corporis iure perferendis repudiandae in hic officia rem officiis. Aperiam qui inventore perspiciatis quam magni nihil accusantium adipisci tenetur labore nostrum. Laboriosam dolores saepe quasi aliquam consectetur reiciendis quia beatae nulla recusandae enim libero consequatur. Unde maiores eligendi suscipit rerum asperiores omnis quasi impedit ex est dignissimos commodi earum laboriosam vero ea deserunt corrupti veniam maxime officiis possimus et nemo minus ab voluptas! Velit aperiam amet et accusantium eius minus quasi repudiandae dolor dolore illum. Beatae nemo eius quisquam illo labore neque nobis delectus obcaecati provident modi nam iusto eum. Quae mollitia excepturi enim quia asperiores expedita laudantium eveniet officia alias quod accusantium maxime error necessitatibus a explicabo repellendus porro commodi quaerat ea id voluptatibus rem corporis quasi perferendis odio ratione atque vero fugiat dolorem nobis odit esse culpa et facilis maiores placeat sequi ipsa voluptates consequatur delectus accusamus ab praesentium veritatis quis natus dolores. Consectetur unde praesentium totam modi sit pariatur laborum consequuntur deserunt natus aliquam vero illum odio. Aliquam molestiae fuga quam illum nemo a laboriosam magnam incidunt consectetur eaque deserunt debitis iste sequi vero iure aspernatur sed assumenda fugit dolor beatae? Esse unde cupiditate maxime similique officia aperiam quas temporibus doloremque in perferendis. Quisquam temporibus beatae illum magni quae excepturi tempore labore harum minus expedita accusamus est eaque eos dolore id vero in maxime. Delectus ipsa dignissimos quos totam non earum ad animi perspiciatis...

JavaScript

$(function() {

    $('div').wity();

});

(function($) {

    // Viewport, is that you?
    $.fn.extend({ wity: function( options ) {
      
      var defaults = {
          a: ''
      };
        
      return this.each(function() {

          var x = {};

          x.obj = $(this),
          x.objD = x.obj.data(),
          x.o = $.extend( true, {}, defaults, options, x.objD );

          where_iiiis_it( x );
          
          $(window).on("scroll resize", function() {
              where_iiiis_it( x );
          });
          
      });  
        
    }});
    
    
    function where_iiiis_it( x ) {

        var obj_offset = x.obj.offset().top,
            winH = $(window).height();
 
        if ( obj_offset < winH ) {
        
            console.log('true')
            x.obj.data({ "visible": true });
            
            if ( !x.objD.visible ) {
                alert(' Kablamo ');
            }
            
        }
        else if ( obj_offset > winH ) {
        
            x.obj.data({ "visible": false })
            
        }
        
    }

})(jQuery);