javascript - 当我在浏览器中点击刷新时，我丢失了 jquery 编程

Question

如果你看一下 http://www.kahuna-webstudio.fr/然后向下滚动页面约 50 像素左右，您将看到屏幕左侧滑出一个 div。我已经成功地复制了这种效果，但有一件事我没有注意到:当你在我的页面上点击刷新时，我的 jquery 编程就会重置。我不希望这种事发生。 http://www.kahuna-webstudio.fr/它工作完美吗？在他们的页面上，当向下滚动 50 像素时，左侧导航就会出现，即使您点击刷新，左侧导航仍然存在。仅当用户滚动回页面顶部时，左侧导航才会消失。

当前有效:用户在我的页面上向下滚动 296 像素，左侧导航滑出，用户将滚动 strip 回页面顶部(像素小于 25)左侧导航栏向后滑动并消失。这一切都在起作用。

什么不起作用:但是假设用户向下滚动 296 像素，左侧导航滑出，然后用户在查看页面时点击刷新。在这种情况下，左侧导航消失了。我的 jquery 编程已重置。我希望当用户处于 296 像素或更大像素时，即使用户点击刷新，左侧导航也始终可见。

我的代码如下。我希望我的问题有意义，并且欢迎任何帮助。谢谢。

$(window).scroll(function () {
    var wintop = $(window).scrollTop();
    var docheight = $(document).height();
    var winheight = $(window).height();

    var newwidthgrow = 80;
    var smallheight = 0;
    var smallwidth = 0;

    //var expanded = "false";
    if ((wintop > 296)) {
        //expanded = "true";
        $("#slidebottom").stop().animate({
            height: docheight + "px"
        }, 'fast', function () {
            $("#slidebottom").stop().animate({
                width: newwidthgrow + "px"
            }, 'slow', function () {
                $("#slidebottomContents").fadeIn();
            });
        });
    }

    if ((wintop < 25)) {
        //expanded = "false";
        $("#slidebottom").stop().animate({
            height: docheight + "px"
        }, 'fast', function () {
            $("#slidebottomContents").fadeOut(function () {
                $("#slidebottom").stop().animate({
                    width: smallwidth + "px"
                });
            });
        });
    }
});

Answer 1

如果您没有适当的代码来记住刷新前的滚动位置，则页面将始终刷新并且滚动位置将再次为 0。听起来这不是您想要的功能。启动时触发滚动不会解决您的问题，除非您在触发之前设置正确的窗口滚动位置。

您提供的示例页面看起来使用了多个滚动库，其中一个(不确定是哪一个)可能负责设置刷新时的滚动位置。

要自己执行此操作，您必须使用本地存储或网址，如下所述: Refresh Page and Keep Scroll Position