Javascript table header is not sticky

Question

I tried to implement a sticky table header based on solution found on W3Schools: https://www.w3schools.com/howto/howto_js_sticky_header.asp

However my table header still doesn't stick in response to scrolling past the header. Console log gives expected values for sticky, window.pageYOffset, header.offsetHeight. Am I missing something?

My code summary is below :

<html lang="en">
    <head>
        <style type="text/css">
        /*...*/
                #myTable {
                    float:left;
                    width:75%;
                    background-color:#fff;
                    padding:6px;
                    margin-left:175px;
                }

                #myTable th {
                    cursor:pointer;
                    position: sticky;
                    top: 0;
                }

                #myTable th:hover {
                    background-color:#66991c;
                    color:white;
                }

                #myTable tr:nth-child(even) {
                    background-color:#eee;
                }

                #myTable tr:nth-child(odd) {
                    background-color:#fff;
                }

                #table-link {
                    display:block;
                    text-decoration:none;
                    background-color:black;
                    color:white;
                    border-radius:5px;
                }

                #table-link a {
                    display:block;
                    text-decoration:none;
                    background-color:black;
                    color:white;
                    border-radius:5px;
                }

                #table-link a:hover {
                    display:block;
                    text-decoration:none;
                    background-color:#66991c;
                    color:white;
                    border-radius:5px;
                }

                .sticky {
                    position: fixed;
                    top: 0;
                    width: 100%;
                }
        /*...*/
        </style>    
    </head>
    <body>
        ...
        <table id="myTable">
        <div id="myHeader">
            <caption>...</caption>
            <thead>...</thead>
        </div>
        <tbody>...</tbody>
        </table>
        ...

        <script>
        window.onscroll = function() {myFunction()};

        var header = document.getElementById("myHeader");
        var sticky = header.offsetTop;

        function myFunction() {
          if (window.pageYOffset > sticky) {
            header.style.paddingTop = header.offsetHeight + 'px';
            header.classList.add("sticky");
          } else {
            header.style.paddingTop = 0;
            header.classList.remove("sticky");
          }
        }
        </script>
    </body>
</html>

Your current code seems to be working fine here: http://jsfiddle.net/AndrewL64/f0d42bet/24/ — AndrewL64, Dec 23 '18 at 17:51
Please post all your CSS too. I think you didn't copy all the required styles from the example stylesheet. You need to copy more than just the `.sticky` from the css in the example. — AndrewL64, Dec 23 '18 at 17:52
1. don't use w3schools 2. your HTML is invalid, `` cannot directly contain a div. For me, firefox moves the `
` outside the table but leaves `
` inside, which means you don't see whether the code does what it should 3. there's this: [`position: sticky`](https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning) — , Dec 23 '18 at 17:55
Still doesn't work, I tried making th position: sticky, and removed all javascript elements and
inside the table... — cqcum6er, Dec 23 '18 at 19:29
Got it to work now, but is there any way to include inside the sticky element ? Or do I have to resolve to javascript? — cqcum6er, Dec 23 '18 at 21:21
NVM, I added the position:sticky to the caption, everything is working now — cqcum6er, Dec 24 '18 at 21:54

Jeaf Gilbert · Answer 1 · 2018-12-23T18:36:29.440

5

Use position:sticky without Javascript.

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

edited Dec 23 '18 at 18:36

answered Dec 23 '18 at 18:23

Jeaf Gilbert

11,495
19
78
105

Be sure to check browser support before going with this, even though it’s nice. https://caniuse.com/#search=Sticky – Nate Dec 23 '18 at 19:24
Doesn't work for me (for Chrome, Firefox, and IE). Putting the position modifier under thead th doesn't work either:( – cqcum6er Dec 23 '18 at 20:55
You should take the div out of table tag. Sticky element will only be sticked as long as bottom edge of its parent container doesn’t touch the bottom edge of sticky element, otherwise it will be scrolled along. – Jeaf Gilbert Dec 23 '18 at 21:10
Nvm, I put the html comment in place of css comment, everything is working now – cqcum6er Dec 23 '18 at 21:15

Javascript table header is not sticky

1 Answers1