I am attempting to keep an element fixed at the top position by using position:relative,
$(document).ready(function() {
var container = $(".container");
container.css("overflow-y", "auto");
container.css("overflow-x", "hidden");
container.on("scroll", function() {
$("table", this).css("overflow-x", "hidden");
$("th", this).css("position", "relative");
$("th", this).css("z-index", 1);
$("th", this).css("top", this.scrollTop + "px");
});
});
An example of issues can be found here. It works well in Chrome and Firefox, but Safari and IE experience lag when scrolling. Does anyone know how to fix this issue specifically in Safari? I chose not to use absolute or fixed positions because my table is quite complex and calculating column widths on the fly would be challenging.