JSFiddle - React, Tailwind, and code Playground

by deligeli

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>
<div class="container">
 <div class="row">
     
      <div>xxxxxxxx</div>
  
    </div>
<div class="row fixme" style="position: static; top: 0px; left: 0px;">
     <div class="col-md-4">
      <div class="pull-right">
       <a class="btn btn-app">Apply Actions</a>
       <a class="btn btn-app">Download XLS</a>
      </div>
     </div>
    </div>
    
    <div class="row">
      <table class="countries-table">
        <thead>
          <tr>
            <td>Name</td><td>Value</td>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
            <td>John</td><td>The Boy</td>
          </tr>
          <tr>
       ...

CSS

.fixme {
  width: 100%;
  margin-top: 0 !important;
  background-color: #000;
  z-index: 5000;
  margin-bottom: 20px;
}

.countries-table {
  width: 100%;
  background-color: silver;
}

.countries-table thead {
  font-weight: bold;
}

JavaScript

$(document).ready(function() {

  var fixmeTop = $(".fixme").offset().top;
  var countriesTableTop = $(".fixme").height() + 20;
  $(window).scroll(function() {
    var currentScroll = $(window).scrollTop();
    if (currentScroll >= fixmeTop) {
      $(".fixme").css({"position": "fixed", "top": "0", "left": "0"});
      $(".countries-table").css({"position": "fixed", "top": countriesTableTop, "left": "0"});
    } else {
      $(".fixme").css("position", "static");
      $(".countries-table").css("position", "static");
    }
  });
});