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

If you want to have an affix on your header you can use this tricks, add position: relative on your th and change the position in eventListener('scroll')

I have created an example: https://codesandbox.io/s/rl1jjx0o

I use vue.js but you can use this, without vue.js