Question

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

这是JSFiddle演示：http://jsfiddle.net/3zrw2xko/1/

这是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

因为它取自当前位置计算的位置。理想的解决方案是从文档的左侧计算位置，并从当前窗口的左侧 not 。

Answer 1

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

Answer 2

在变量中设置当前位置，并在页面刷新后再次获取它。请参阅此答案，以便轻松实现此目的：How to get JS variable to retain value after page refresh?

Answer 3

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

这是因为刷新页面时滚动的位置将会丢失，因此您必须存储该位置并从文档onLoad事件中的像素数量滚动。

关于window.innerwidth，它指的是整个文档的宽度，而$(document).scrollLeft()指的是左侧滚动的像素数量。

Answer 4

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

$(document).width

如jQuery docs http://api.jquery.com/width/

中所示

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

如果你想在像JSFiddle这样的空间中重新创建它，你必须保存你的滚动位置，以便以后可以访问它。您可以通过利用浏览器本地存储来实现此目的。这可能是一个很好的起点。 http://diveintohtml5.info/storage.html

但是你仍然需要检查加载时的滚动位置，所以我建议你将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();

刷新后使用Javascript定位元素的位置

4 个答案: