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

I accomplished something similar using jQuery Waypoints.

There's a lot of moving parts, and quite a bit of logic (that I hope to get on GitHub some day soon), but essentially what you could do is...

1. Duplicate the table DOM structure in JavaScript and add a class called fixed.
2. Add styles for table.fixed that make it invisible.
3. Set a way point at the bottom of the header navigation that adds a class called sticky to table.fixed
4. Add styles for table.sticky.fixed that position it just below the navbar and also make just the thead content visible. This also has a z-index so it is laid above the rest of the content.
5. Add another waypoint, but in the downward scroll event, that removes .sticky from the table.fixed

You have to duplicate the entire table DOM in order to ensure column widths line up appropriately.

If that sounds really complicated, you might want to try playing around with the DataTables plugin and the FixedHeader extension: https://datatables.net/extensions/fixedheader/