Bootstrap 4 .sticky-top 更改为 thead

Question

since a few days .sticky-top class does not work anymore on thead tags. Last Week it just worked perfectly, now I came back and tried few things on my App and it stopped working. Anyone got an idea why?

<thead class="sticky-top>
 ...
<thead>

That just worked perfectly. Now I cannot use it anymore. I tested it with just divs and for divs its still working, but I get an electron-dom error that I cannot spawn a div as a child of an table and i cannot spawn thead/th as child of a div.

Cheers, Puschek

Answer 1

For everyone that is interessted in this problem:

Somehow you cannot sticky-top directly on thead (I just wonder why it worked 1 week ago...) so you have to stick the elements to your <thead> . So just give every single <th> the .sticky-top class and it works without any problems.

Greetings

Answer 2

I found out that .sticky-top does not work together with .table-responsive , in case you added that.

Here is a compromise solution

Answer 3

Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS's position: sticky , which isn't fully supported in all browsers.

Microsoft Edge and IE11 will render position: sticky as position: relative . As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that properly can render it.

<div class="sticky-top">...</div>

Learn more about it

https://getbootstrap.com/docs/4.0/utilities/position/#sticky-top

Answer 4

cheers i had the same issue

check: Few stuff to corrected

1. make sure tag or the div that wrap your navigation is direct child of body tag (this important)!
2. make sure the direct parent; (body) has no overflow property on it The rest is normal if you are using bootsrap 4 :-add sticky-top as usual or you can use separate javascript tooo will work !!

http://blog.cloud66.com/position-sticky-problem/ .