滚动经过 header 后显示图像 - 尝试无效？

Question

我最近接手了朋友网站 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 的工作，这看起来基本相同，但我无法让其中任何一个工作。

我对任何东西和所有脚本都是新手（我完全确定这是这里最大的问题，我知道。）所以任何帮助都值得感激，因为我显然做错了。

Answer 1

首先给 <div class="fixeddiv"> 一个 style="display: none"。然后添加以下内容（因为您已经在使用 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();
        }
    });
});

下面是这段代码的作用。文档加载完成后，它会获取 "content" div 距文档顶部的像素数（偏移量）。每当 window 调整大小时，它都会再次执行此操作。然后，当有人向上或向下滚动时，它会获取已经隐藏在滚动条上方的像素数 (scrollTop)。如果隐藏像素的数量大于#content div 距 window 顶部的偏移量，则意味着我们已经滚动到内容 div 的顶部并且应该显示图标。否则，我们应该隐藏图标。

滚动经过 header 后显示图像 - 尝试无效？

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

html

javascript

css

jquery

scroll