Question

A very basic setup: title-shim-container. The shim ensures, that on page load, the container is kept at bottom of window to make room for a video live-stream in the background.

When the container is scrolled up and hits the title, the title shall be pushed off screen and drop down in its original position. The container is positioned relative by the jQuery Isotope plugin; that can’t be changed.

The first part I got in this fiddle here. But how to get the second part working? I got only this far 🙁

jQuery.event.add(window, "load", shimming);
jQuery.event.add(window, "resize", shimming);
    
function shimming() {
    var wheight = $(window).height();
    $('#shim').css('height', (wheight - 63));
} // this part up to here works

$(window).bind("load resize scroll", function () {
    var wheight = $(window).height();
    console.log(wheight);
    var wscrolled = $(window).scrollTop();
    console.log(wscrolled);

I asked for this in previous posts without providing a fiddle, so I better delete those posts?

Thanks for advice…

Answer 1

It took me a second to figure out what you were asking. The comments in the fiddle were actually more useful than your question here, but I think this captures what you were going for:

if (wscrolled > wheight - 187) {
    $('#title').css('position', 'absolute');
    $('#title').css('top', (wheight - 123));
} else if (wscrolled <= wheight - 187) {
    $('#title').css('position', 'fixed');
    $('#title').css('top', 64);
}

The 187 comes from the combined height and margin of the tile along with the gap space left over by the shim. The 123 is the height of the title and the gap space to keep everything lined up correctly.

— Edited —

It occurs to me that it’s worth adding an else if condition to prevent repeatedly setting the existing setting if there will be a lot of scrolling going on.