I am looking to update the left position while scrolling using the arrow keys or middle mouse button, rather than just when scrolling up or down.
My current script is as follows:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll >= 672) {
$('.firm-row-th').addClass("stickyHeader");
}else {
$('.firm-row-th').removeClass("stickyHeader");
}
if($('.stickyHeader')[0]) {
$('.stickyHeader').css({ 'left': -$('.firm-container').scrollLeft() + "px" });
}
});
The CSS I am using:
.firm-container {
margin-left: 0px;
width: calc(100% - 8px);
white-space: nowrap;
border: 1px solid #222;
overflow-x: auto;
z-index: 10;
position: absolute;
background-color: #fff;
}
.firm-row {
display: table;
table-layout: fixed;
}
.firm-row-th {
display: table;
table-layout: fixed;
}
.stickyHeader {
position: fixed;
top:0;
}
For demonstration purposes, here is a fiddle example.
If you try scrolling right with the sticky header in place, you will notice that it does not refresh. However, scrolling down will trigger the refresh for the sticky header.