Javascript/CSS, 如何保持变化？

Question

基本上，我有这个 header，当人们不再需要它时，它会滑开，当他们需要时，可以再次滑下来。我希望它默认关闭，但我不希望人们必须不断单击 header 切换 every-time 才能加载新页面。我读过有关使用 cookie 的信息，但我在 javascript 方面的技能相当有限。这是我目前使用的运行良好的代码：

<div id="headtoggle" onclick="headertoggle()"></div>
<script>
        function headertoggle() {
            var top;
            var pagetop;
            if (document.getElementById("page-header").style.top === "-210px") {
                top = "-11px";
                pagetop = "275px";
            } else {
                top = "-210px";
                pagetop = "80px";
            }
            document.getElementById("page-header").style.top = top;
            document.getElementById("page-body").style.top = pagetop;
        }
</script>

如何更改代码，以便 "remembers" 每个人的最后设置是什么？我愿意也用jquery。对于这个非常新手的编码员的任何帮助将不胜感激。

谢谢，迪伦

EDIT2：我稍微更改了给我的代码，但遇到了新问题。

 <div id="headtoggle" onclick="headertoggle()" onload="topposition()"></div>
<script>
    function topposition() {
        var top;
        var pagetop;
        if (localStorage.getItem("headerDown") == "false") {
            top = "-11px";
            pagetop = "275px";
        } else {
            top = "-210px";
            pagetop = "80px";
        }
        document.getElementById("page-header").style.top = top;
        document.getElementById("page-body").style.top = pagetop;
    }
</script>
<script>
    function headertoggle() {
        var top;
        var pagetop;
        if (document.getElementById("page-header").style.top === "-210px") {
            localStorage.setItem("headerDown", false);
            top = "-11px";
            pagetop = "275px";
        } else {
            localStorage.setItem("headerDown", true);
            top = "-210px";
            pagetop = "80px";
        }
        document.getElementById("page-header").style.top = top;
        document.getElementById("page-body").style.top = pagetop;
    }
</script>

开关按预期工作，但是每当我在 firefox 控制台中触发 "function topposition ()" 时，我都会收到以下错误：

SyntaxError: expected expression, got end of script data:,/* EXPRESSION EVALUATED USING THE FIREBUG COMMAND LINE: */%0A%09function%20topposition() Line 2

Answer 1

我会说本地存储将是一个不错的选择。只需记录一个事件或变量或其他任何内容，然后在每次加载页面时检查它。

https://developer.mozilla.org/en-US/docs/Web/API/Window.localStorage

Answer 2

您可以使用

创建 cookie

document.cookie="headerDown=true";

然后当 header 向上移动时用更改为 false 的相同代码覆盖 cookie。

如果您随后添加一些在页面加载时读取 cookie 的代码，您将能够确定需要什么。

您可以通过访问 document.cookie 来读取 cookie，这将是以下格式的任何可用 cookie 的字符串。

cookie1=value; cookie2=value; cookie3=value;

寻找您的 cookie，您应该能够从那里设置 header 是向上还是向下。

Answer 3

使用本地存储将允许您在页面加载之间保存变量。将 localStorage.setItem(name,value) 添加到您的 if 语句中，如下所示。如果您只使用 headerToggle 函数来定位这些元素，那么函数下面的 if 语句就足够了。即使您希望 header 关闭，也需要两次调用 header 切换函数。

您需要确保将 if 语句放在 div 的 html 之后，最有可能的最佳位置是页面的最底部。

function headertoggle() {
  var top;
  var pagetop;
  if (document.getElementById("page-header").style.top === "-210px") {
    localStorage.setItem("headerDown", true);
    top = "-11px";
    pagetop = "275px";
  } else {
    localStorage.setItem("headerDown", false);
    top = "-210px";
    pagetop = "80px";
  }
  document.getElementById("page-header").style.top = top;
  document.getElementById("page-body").style.top = pagetop;
}

if (localStorage.getItem("headerDown") == "true") {
  headertoggle();
}
headertoggle();

Javascript/CSS, 如何保持变化？

Javascript/CSS, How to keep changes?

html

javascript

css

jquery