i am using jquery ui layout. In the center pane (ui-layout-content) i have a large table. I made the thead sticky. But i like to change the background-color if the thead is sticked at the top.
This is my html code:
<body>
<div class="ui-layout-north">
</div>
<div class="ui-layout-content">
<div>Larum Lipsum .... </div>
<div>
<table class="mytable">
<thead><tr><th></th></tr></thead>
<tbody>
<tr><td>Line 1</td></tr>
<tr><td>Line 2</td></tr>
<tr><td>Line 3</td></tr>
...
<tr><td>Line 10000</td></tr>
</tbody>
</div>
</div>
</body>
$(document).ready(function () {
var scroll_start = 0;
var startchange = $('.mytable');
var offset = startchange.offset();
alert('onload:'+offset.top);
if (startchange.length) {
$(document).scroll(function () {
scroll_start = $(this).scrollTop();
alert('scrollstart:'+scroll_start);
if (scroll_start > offset.top) {
$('.mytable > thead > tr > th').css('background-color', 'rgba(0,0,0,.75)');
} else {
$('.mytable > thead > tr > th').css('background-color', 'transparent');
}
});
}
});
I try to get the position of the table at page load. This works great. And if the user scrolls i check if it is on top or not. But the scroll event is never fired.
If i load the page i see "onload: 209" at the alert box. If i scroll down there is no alert box displayed.
Thanks