I have created a series of DIV elements to represent a chart. The key element is everything enclosed within the "rightPanel" section in the following code snippet.
The "topPanel" section has an absolute position, and its top value (top: 0px) needs to be adjusted when scrolling through the rightPanel DIV. Despite having what seems to be correct jQuery code, it is not triggering on the rightPanel scroll event. Here is the relevant code:
HTML
Main
<div class="mainContent">
<div class="leftPanel"> Left Panel
</div>
<div class="rightPanel">Right Panel
<div class="dataPanel">Data Panel
<div class="topPanel">Top
</div>
<div class="bottomPanel">
<p>Data Data Data Data Data</p>
</div>
</div>
</div>
CSS
.mainContent
{
width: 100%;
max-height: 500px;
overflow: hidden;
overflow-y: scroll !important;
position: relative;
border: solid 3px blue;
}
.leftPanel
{
width: 225px;
position: relative;
overflow: hidden;
border: solid 3px pink;
float: left;
}
.rightPanel
{
overflow: hidden;
border: solid 3px orange;
}
.dataPanel
{
width:21355px;
height: 3253px;
border: solid 3px yellow;
}
.topPanel
{
position: absolute;
width: 21355px;
border: solid 4px purple;
}
.bottomPanel
{
clear:both;
border: solid red 3px;
}
jQuery
var sOffset = $(".topPanel").offset().top;
var shareheight = $(".topPanel").height() + 43;
$(".rightPanel").scroll(function() {
alert('in the function');
var scrollYpos = $(document).scrollTop();
if (scrollYpos > sOffset - shareheight) {
alert('inside');
$(".topPanel").css({
'top': '61px',
});
} else {
alert('else');
$(".topPanel").css({
'top': 'auto',
});
}
});
You can view my implementation on this fiddle http://jsfiddle.net/LH7g7/