My challenge is to have a fixed div appear on top of various background images. The problem arises when this fixed div exceeds the height of the window, causing it not to scroll and resulting in lost content. I've attempted using max-height: 100% and y-overflow:scroll;, but to no avail.
To address this issue, I devised a workaround using the following JavaScript:
<script>
$(window).scroll(function(){
var css = {};
if ($(window).scrollTop() > 120){
css = { top:'0'};
}
else {
css = {top:'120'};
}
$('#writtenContent').animate(css,{duration:200,queue:false});
});
</script>
This solution lifts the div up, although it is not ideal for several reasons. I am seeking a way to determine how much of the div is hidden and move up that amount accordingly or make the fixed div scrollable. Ideally, these adjustments should only occur as needed, meaning if the div fits within the window, no action would be required.
I welcome any suggestions!
===============UPDATE=================
Hello everyone - I created a quick jsfiddle showcasing the issue I'm facing. It's a simplified version, demonstrating how we lose content when the window is resized smaller than the content-holding div.