JSFiddle - React, Tailwind, and code Playground

by 533135

HTML

<div id = top>top top top</div>

<div id = rit style="width:300px;height:300px;widht:500px;background:orange;margin-left: 150%;margin-right:10%;">left</div>
<div id = left style="width:300px;height:300px;widht:500px;background:green;margin-left: 50%;">rit</div>
<br></br>
<br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br><br></br>
<div id = bottom style="height:500px;width:100px;background:red;">bottom bottom</div>
<button style="position:fixed;top:50px;left:100px;">check</button>

JavaScript

$(document).ready(function(){
		$("button").click(function(){
            $("div:_inTopport").each(function(){
			$(this).css("border","3px solid red");
			})
	  });
    	
	   }); 
/*********pulgin ********/
//usage $("div:_inTopport").each(function(){
			//$(this).css("border","3px solid red");
			//})
//usage $("div:_inLeftport").each(function(){
			//$(this).css("border","3px solid red");
			//})
//usage $("div:_inBottomport").each(function(){
			//$(this).css("border","3px solid red");
			//})
//usage $("div:_inRightport").each(function(){
			//$(this).css("border","3px solid red");
			//})


/****/
(function($){
        $winHeit = $(window).height();
        $winwdth = $(window).width();
	
        $.inTopPort = function(elem) {
        	 $offset = $(elem).offset();
        	 $scTop  = $(window).scrollTop(); 
        	 
	       return($offset.top - $scTop < 0 );
        };
        
        $.inBottomport = function(elem) {
        	 $offset = $(elem).offset();
        	$thisHeight = $(elem).height();
        	 $scTop  = $(window).scrollTop(); 
        	 
        	$newHeit = ($offset.top+$thisHeight);
        	
            return($newHeit - $scTop > $winHeit );
       };
       
       $.inLeftport = function(elem) {
    	   $offset = $(elem).offset();
    	   $scLeft  = $(window).scrollLeft(); 
    	   
    	   return($offset.left - $scLeft < 0 );
      };
      $.inRightport = function(elem) {
    	  $offset = $(elem).offset();
    	  $thisWidth = $(elem).height();
    	  $scLeft  = $(window).scrollLeft(); 
    	  
    	  $newwidth = ($offset.left+$thisWidth);
    	  
          return($newwidth - $scLeft > $winwdth );
      };
        $.inViewport = function(elem) {
      	  
        	return(!$.inTopPort(elem) && !$.inLeftport(elem) && !$.inRightport(elem) && !$.inBottomport(elem));
        	
          };
    $.extend($.expr[':'], {
    	"_inTopport":function(elem){
    	return $.inTopPort(elem);
    },
    "_inLeftport":function(elem){
    	return...