JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<div id="wrapper">
  
  <div class="main">
  	<div class="filters">
    SIDEBAR
    </div>
    
    <div class="trigger"></div>
    <div class="content">
        <div class="row">
            <div class="product product-1"></div>
            <div class="product"></div>
            <div class="product product-3"></div>
            <div class="product product-4 nopadding"></div>      
      	</div>
        
        <div class="row">
            <div class="product product-1"></div>
            <div class="product"></div>
            <div class="product product-3"></div>
            <div class="product product-4 nopadding"></div>      
      	</div>
        
        <div class="row">
            <div class="product product-1"></div>
            <div class="product"></div>
            <div class="product product-3"></div>
            <div class="product product-4 nopadding"></div>      
      	</div>
        
        <div class="row">
            <div class="product product-1"></div>
            <div class="product"></div>
            <div class="product product-3"></div>
            <div class="product product-4 nopadding"></div>      
      	</div>
        
        
        <div class="row">
            <div class="product product-1"></div>
            <div class="product"></div>
            <div class="product product-3"></div>
            <div class="product product-4 nopadding"></div>      
      	</div>
        
        
        <div class="row">
            <div class="product product-1"></div>
            <div class="product"></div>
            <div class="product product-3"></div>
            <div class="product product-4 nopadding"></div>      
      	</div>
        
        
        <div class="row">
            <div class="product product-1"></div>
            <div class="product"></div>
            <div class="product product-3"></div>
            <div class="product product-4 nopadding"></div>      
      	</div>
        
        
        <div...

CSS

/* General
*********************************/ 
body { margin: 0px; padding:0px; }
#wrapper { width:976px; margin:0 auto; }
.content { float:right; width:752px; padding-bottom:50px;}


/* Products
*********************************/ 
.product {float:left; }
.product {position:relative; width:152px; height:321px; float:left; margin-right:40px; background:#ccc;}
.nopadding {margin:0px}
.row {margin-bottom:23px; height:321px;}


/* Filters
*********************************/ 
.filters {float:left; position:relative; z-index:1; background:#999; height:1000px; width:185px;}
.trigger {position:fixed; top:0px; width:185px; height:50px; background:red; cursor:pointer; z-index:0 }

JavaScript

$('.trigger').click(function(){
	var scrollval = $(document).scrollTop();
	$(".filters").css('top', scrollval);
	$(".filters").addClass('filters-fixed');
});


$('.filters-fixed').waypoint(function(direction) {
	 if (direction === 'down') {
	  $(this).css('position', 'fixed');
	}
	else {
	  $(this).css('position', 'relative');
	}
});