Making an image appear after scrolling past header - attempts not working?

Question

I've recently taken over work on a friend's website, here. I want to get the small logo above the description box to only show up once the user has scrolled past (and subsequently hidden) the large header at top, and disappear again if the user scrolls back up past it. I've tried the methods recommended in these other posts here and here, which seem like the same basic idea but I can't get any of them to work.

I'm new to anything and everything scripting (which I'm entirely sure is the biggest problem here, I know.) So any help is appreciated as what I'm apparently doing wrong.

Answer 1

Start by giving the <div class="fixeddiv"> a style="display: none". Then add the following (since you're already using jQuery):

$(document).ready(function () {
    var contentOffset = getOffset();

    function getOffset() {
        var allOffsets = $("div#content").offset();
        return allOffsets.top;
    }

    $(window).resize(function () {
        contentOffset = getOffset();
    });

    $(window).scroll(function () {
        var windowTop = $(window).scrollTop();

        if (windowTop > contentOffset) {
            $("div.fixeddiv").show();
        } else {
            $("div.fixeddiv").hide();
        }
    });
});

Here's what this code does. When the document is done loading, it gets the number of pixels that the "content" div is from the top of the document (offset). It does this again any time the window is resized. Then, when someone scrolls up or down, it gets the number of pixels that are already hidden above the scroll (scrollTop). If the number of hidden pixels is greater than the offset of the #content div from the top of the window, that means we've scrolled past the top of the content div and should show the icon. Otherwise, we should hide the icon.