javascript - 刷新后使用 Javascript 元素的位置

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"});
}
});

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

我认为这是关于使用

window.innerWidth

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

Answer 1

刷新页面时，除非先保存，否则您将丢失当前状态。尝试将当前位置保存在本地存储(或 cookie)中，并在刷新页面时获取该位置。