Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Juan Muñoz

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div>
<table id='HeaderMostrar' style='width:100%;' class='hidden'>
<thead>
  <tr>
    <td style='width:15%'>Glosa</td>
    <td colspan='2' style='width:27%'>Cuenta</td>
    <td style='width:10%'>Debe</td>
    <td style='width:10%'>Haber</td>
    <td style='width:14%'>Item</td>
    <td style='width:14%'>CC</td>
    <td colspan='2' style='width:10%'><span style='width:99%'>Opciones</span></td>
  </tr>
</thead>
</table>



<table style='width:100%;'>
<thead>
  <tr>
    <td style='width:15%'>Glosa</td>
    <td colspan='2' style='width:27%'>Cuenta</td>
    <td style='width:10%'>Debe</td>
    <td style='width:10%'>Haber</td>
    <td style='width:14%'>Item</td>
    <td style='width:14%'>CC</td>
    <td colspan='2' style='width:10%'><span style='width:99%'>Opciones</span></td>
  </tr>
</thead>
  <tr>
    <td style='width:15%'><input type="text" class='form-control' style='width:99%'></td>
    <td style='width:10%'><input type="text" class='form-control' style='width:99%'></td>
    <td style='width:17%'><select class='form-control'  style='width:99%'></select></td>
    <td style='width:10%'><input type="text" class='form-control' style='width:99%'></td>
    <td style='width:10%'><input type="text" class='form-control'  style='width:99%'></td>
    <td style='width:14%'><select class='form-control'  style='width:99%'></select></td>
    <td style='width:14%'><select class='form-control'  style='width:99%'></select></td>
    <td style='width:5%;text-align:center;'><span style='width:99%'>1</span></td>
    <td style='width:5%;text-align:center;'><span style='width:99%'>2</span></td>
  </tr>
</table>
</div>

CSS

thead{
  text-align:center;
  font-size:1.2em;
  background-color:#035e94;
  color:white;
}
table{
  padding:5px;
  margin:5px;
}
div{
    height: 400px;
    overflow-y:scroll;
}
#HeaderMostrar{
  position: absolute;
}

JavaScript

$(document).ready(function (){
	$(window).scroll(function(e){
  var {x,y} = dw_getScrollOffsets();
  console.log({x,y})
  if (y > 30){
  	$('#HeaderMostrar').removeClass('hidden');
  }
  })
})

function dw_getScrollOffsets() {
    var doc = document, w = window;
    var x, y, docEl;
    
    if ( typeof w.pageYOffset === 'number' ) {
        x = w.pageXOffset;
        y = w.pageYOffset;
    } else {
        docEl = (doc.compatMode && doc.compatMode === 'CSS1Compat')?
                doc.documentElement: doc.body;
        x = docEl.scrollLeft;
        y = docEl.scrollTop;
    }
    return {x:x, y:y};
}