Menu
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>
334
asked Jan 31 '26 13:01
Use position:sticky without Javascript.
.sticky {
position: sticky;
position: -webkit-sticky;
top: 0;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
