How to stick table header(thead) on top while scrolling down the table rows with fixed header(navbar) in bootstrap 3?

Question

Bootstrap layout with fixed-navbar. Having table with so many rows in body.

Issue? As i scroll the page navigation-bar will be there be

Answer 1

Use: https://github.com/mkoryak/floatThead

Docs: http://mkoryak.github.io/floatThead/examples/bootstrap3/

$(document).ready(function(){
  $(".sticky-header").floatThead({top:50});
});

DEMO with 2 Tables and Fixed Header: http://jsbin.com/zuzuqe/1/

http://jsbin.com/zuzuqe/1/edit

---

HTML

  

    

      
        
        
        
      
      Project name
    
    

      

        
Home
        
About
        
Contact
        

          Dropdown 
          

            
Action
            
Another action
            
Something else here
            

            
Nav header
            
Separated link
            
One more separated link
          
        
      
    
    
  




  

    
Sticky footer with fixed navbar
  
  
Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within #wrap with padding-top: 60px; on the .container.
  

    

      

        
#
        
First Name
        
Last Name
        
Username
      
    
    

      

        
1
        
Mark
        
Otto
        
@mdo
      
      

        
2
        
Jacob
        
Thornton
        
@fat
      
      

        
3
        
Larry
        
the Bird
        
@twitter
      
      

        
1
        
Mark
        
Otto
        
@mdo
      
      

        
2
        
Jacob
        
Thornton
        
@fat
      
      

        
3
        
Larry
        
the Bird
        
@twitter
      
      

        
1
        
Mark
        
Otto
        
@mdo
      
      

        
2
        
Jacob
        
Thornton
        
@fat
      
      

        
3
        
Larry
        
the Bird
        
@twitter
      
      

        
1
        
Mark
        
Otto
        
@mdo
      
      

        
2
        
Jacob
        
Thornton
        
@fat
      
      

        
3
        
Larry
        
the Bird
        
@twitter
      
    
  

  
Table 2

  

    

      

        
#
        
New Table
        
Last Name
        
Username
      
    
    

      

        
1
        
Mark
        
Otto
        
@mdo
      
      

        
2
        
Jacob
        
Thornton
        
@fat
      
      

        
3
        
Larry
        
the Bird
        
@twitter
      
      

        
1
        
Mark
        
Otto
        
@mdo
      
      

        
2
        
Jacob
        
Thornton
        
@fat
      
      

        
3
        
Larry
        
the Bird
        
@twitter
      
      

        
1
        
Mark
        
Otto
        
@mdo
      
      

        
2
        
Jacob
        
Thornton
        
@fat
      
      

        
3
        
Larry
        
the Bird
        
@twitter
      
      

        
1
        
Mark
        
Otto
        
@mdo
      
      

        
2
        
Jacob
        
Thornton
        
@fat
      
      

        
3
        
Larry
        
the Bird
        
@twitter
      
    
  

---

CSS

body{
  padding-top:50px;
}
table.floatThead-table {
  border-top: none;
  border-bottom: none;
  background-color: #fff;
}