Question

我最近接管了朋友网站here的工作。我想让描述框上方的小徽标只在用户滚动过去（并随后隐藏）顶部的大标题后才会显示，如果用户向上滚过它，则会再次消失。我已经尝试过这些其他帖子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();
        }
    });
});

这是这段代码的作用。当文档加载完成后，它会获得＆＃34;内容＆＃34; div来自文档的顶部（偏移）。它会在调整窗口大小时再次执行此操作。然后，当有人向上或向下滚动时，它会获得已隐藏在滚动上方的像素数（scrollTop）。如果隐藏像素的数量大于#content div与窗口顶部的偏移量，则表示我们已经滚过内容div的顶部并应显示图标。否则，我们应该隐藏图标。

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

1 个答案: