After creating a fixed header for my HTML table, I noticed that as I scroll down the page, everything is being overlapped by the fixed header except for one slider (noUiSlider). I am curious to know which CSS property is preventing the header from overlaying this slider.
Here is the CSS code for the fixed header:
#header-fixed {
position: fixed;
top: 0px;
display:none;
background-color:white;
}
And here is the JavaScript code for the fixed header:
var tableOffset = $("#listView-tab").offset().top;
var $fixedHeader = $( "#header-fixed" );
$(window).bind("scroll", function() {
var offset = $(this).scrollTop();
if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
$fixedHeader.show();
}
else if (offset < tableOffset) {
$fixedHeader.hide();
}
});
The first image attached shows all the elements associated with the slider, while the second image illustrates how all other elements are overlapping except for the slider.