javascript - 滚动过标题后显示图像 - 尝试不起作用？

Question

我最近接手了 friend 网站的工作，here .我想让描述框上方的小 Logo 仅在用户滚动经过(并随后隐藏)顶部的大标题后才显示，如果用户向上滚动经过它再次消失。我已经尝试了这些其他帖子中推荐的方法 here和 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();
        }
    });
});

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