刷新后Javascript元素的位置

我正在寻找一种方法，只有在向右滚动大约100%后，才能将页面的#header元素定位为“fixed”

以下是JSFIDLE演示：

下面是JavaScript：

var header = $("#header");
$(document).scroll(function() {
if($(this).scrollLeft() >= window.innerWidth) {
    header.css(
        {
            "display":"",
            "position" : "fixed", 
            "top" : "0", 
            "left" : "0", 
            "width" : "50px", 
            "height" : "50px",
            "background" : "red", 
            "z-index" : "9999"
        }
    );
   } else {
    header.css({"display" : "none"});
}
});

但还有最后一个问题：当我刷新包含此脚本的真实项目页面时，红色方块消失，我必须再次滚动

我认为这是关于使用

window.innerWidth

---

因为它采用从当前位置计算的位置。理想的解决方案是从文档的左侧计算位置，而不是从当前窗口的左侧计算位置。

刷新页面时，除非先保存，否则将丢失当前状态。尝试在localstorage（或cookie）中保存当前位置，并在刷新页面时获取该位置。

刷新页面时，除非先保存，否则将丢失当前状态。尝试在localstorage（或cookie）中保存当前位置，并在刷新页面时获取该位置。

在变量中设置当前位置，并在页面刷新后再次获取该位置。查看此答案，了解实现此目的的简单方法：

在变量中设置当前位置，并在页面刷新后再次获取它。查看此答案，了解实现此目的的简单方法：

如果我正确理解了您的问题，如果您在已向右滚动的情况下刷新页面，则不会出现红方块

这是因为刷新页面时，您已滚动的位置将丢失，因此您必须存储该位置并在文档

onLoad

事件中从该像素量滚动

---

关于

window.innerwidth

，它指的是整个文档的宽度，而

$（文档）。scrollLeft（）

指的是在左侧滚动的像素量。

如果我正确理解您的问题，如果您在已经向右滚动的情况下刷新页面，则不会出现红方块

这是因为刷新页面时，您已滚动的位置将丢失，因此您必须存储该位置并在文档

onLoad

事件中从该像素量滚动

---

关于

window.innerwidth

，它指的是整个文档的宽度，而

$（文档）。scrollLeft（）

指的是在左侧滚动的像素量。

如果您正在寻找如何在jQuery中获取文档的宽度

$(document).width

如jQuery文档所示

不过，听起来您的问题是，刷新时页面没有保存您滚动到的位置。我怀疑这只是因为您正在使用JSFIDLE，如果您在实际页面上重新创建它，它将保存滚动位置

如果您想在JSFIDLE这样的空间中重新创建它，您必须保存您的滚动位置，以便以后可以访问它。您可以通过利用浏览器本地存储来实现这一点。这可能是一个好的开始

但是您仍然需要检查加载时的滚动位置，因此我建议将javascript包装到一个可以调用的函数中

var header = $("#header");
function scrollCheck(){
    if($(this).scrollLeft() >= window.innerWidth) {
        header.css({
            "display":"",
            "position" : "fixed", 
            "top" : "0", 
            "left" : "0", 
            "width" : "50px", 
            "height" : "50px",
            "background" : "red", 
            "z-index" : "9999"
        });
       } else {
        header.css({"display" : "none"});
    }
}

$(document).scroll(function() {
  scrollCheck();
});
scrollCheck();

---

如果您正在寻找如何在jQuery中获取文档的宽度

$(document).width

如jQuery文档所示

不过，听起来您的问题是，刷新时页面没有保存您滚动到的位置。我怀疑这只是因为您正在使用JSFIDLE，如果您在实际页面上重新创建它，它将保存滚动位置

如果您想在JSFIDLE这样的空间中重新创建它，您必须保存您的滚动位置，以便以后可以访问它。您可以通过利用浏览器本地存储来实现这一点。这可能是一个好的开始

但是您仍然需要检查加载时的滚动位置，因此我建议将javascript包装到一个可以调用的函数中

var header = $("#header");
function scrollCheck(){
    if($(this).scrollLeft() >= window.innerWidth) {
        header.css({
            "display":"",
            "position" : "fixed", 
            "top" : "0", 
            "left" : "0", 
            "width" : "50px", 
            "height" : "50px",
            "background" : "red", 
            "z-index" : "9999"
        });
       } else {
        header.css({"display" : "none"});
    }
}

$(document).scroll(function() {
  scrollCheck();
});
scrollCheck();

---

非常感谢。有没有办法让用户在刷新页面后返回到页面的开头？某种重置？刷新页面将重新加载文档，因此在加载时调用

窗口。滚动到（0,0）

即可。谢谢。有没有办法让用户在刷新页面后返回到页面的开头？某种重置？刷新页面将重新加载文档，因此在加载时调用

窗口。滚动到（0,0）

即可。感谢您提供此资源。感谢您提供此资源。