I have replicated this issue in a live example: http://jsfiddle.net/pda2yc6s
When scrolling vertically, a specific div element sticks to the top. However, if the window is narrower than the wrapper's width and you scroll horizontally, the sticky element overflows its parent div.
Below is the CSS code involved:
div#wrapper {
background-color: #ffffff;
margin: 0 auto;
width: 1058px;
}
div#mainContent {
float: left;
width: 728px;
}
div#sideBar {
float: right;
width: 300px;
}
.stick {
background-color: #ffffff;
border-bottom: 1px solid;
position: fixed;
top: 0;
height: 46px;
width: 728px;
}
This JavaScript snippet makes the sticky functionality work:
$(document).ready(function () {
var s = $("#mainContent h1");
s.wrap('<div class="sticky-wrapper"></div>');
var pos = s.position();
var t = $('.sticky-wrapper');
$(window).scroll(function () {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top) {
t.height(46);
s.addClass("stick");
} else {
t.removeAttr('style');
s.removeClass("stick");
}
});
});
Why is the sticky element misbehaving in this way? What could be a potential solution?