Question

如果您查看http://www.kahuna-webstudio.fr/并向下滚动页面大约50个像素左右，您会看到屏幕左侧的div滑出。我设法复制了这个效果，但有一件事让我感到不安;那就是当你在我的页面上点击刷新我的jquery编程重置。我不希望这种情况发生。 http://www.kahuna-webstudio.fr/让它完美运作。在向下滚动50个像素并且左侧导航出现的页面上，即使您点击刷新，左侧导航仍然存在。当用户滚动回页面顶部时，左侧导航仅消失。

目前正在使用的是什么：用户在我的页面上向下滚动296像素，左侧导航栏滑出，用户将滚动条带回页面顶部（小于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

将此窗口滚动功能放在一个单独的位置。从窗口滚动和文档就绪调用它。这将确保在滚动页面和加载/刷新页面时都检查用户的位置。

Answer 2

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

您提供的示例页面看起来像是使用多个滚动库，其中一个（不确定哪一个）可能会处理在刷新时设置滚动位置。

要自己动手，您必须使用本地存储或此处说明的网址： Refresh Page and Keep Scroll Position

Answer 3

如果您不想在重新加载页面时使用服务器端来修复位置，则可以使用cookie来解决此问题。

当我在浏览器中点击刷新时，我失去了我的jquery编程

3 个答案: