如何使用Javascript onclick动态更改空div的高度并使用onScroll进行还原

Question

1. 上下文：我在页面顶部的页眉中有一个按钮，我希望访问者跳至同一页面较低位置的表单部分。 对于某些不可更改的因素，页面跳转后，表单部分隐藏在标题下，因此我正在考虑在表单之前创建一个新的div，并更改div的高度以在跳转后将表单向下推。 然后，当用户再次在页面上滚动时，高度应回到0。

2. 问题：当我第一次单击DemoButton时，div的高度没有变化，并且该窗体进入标题下，但是第二次它起作用了。 我不知道该如何解决。

基本的html结构如下所示：

<div>
<a href="#demoForm" id="DemoButton">
<button>request demo</button>
</a>
</div>
<div id="space"></div>
<from id="demoForm">...</form>

JavaScript的：

window.onload = function comparison() {
  window.addEventListener("scroll", reset, false);
  var demo = document.getElementById('DemoButton');
  demo.onclick = uniform;
}


function reset() {
    document.getElementById('Space').style.height = '0';
}

function uniform() {
    document.getElementById('Space').style.height = '160px';

};

Answer 1

我知道现在有很多人正在使用更新的CSS作为响应标头。 我相信这是使用media queries完成的，我可能建议您对其进行更多研究。 （我有一些经验，这也很容易也很酷。）

理想情况下，您希望在没有JavaScript的CSS中发生类似的事情。 看看是否可以通过这种方式弄清楚。

使用非常轻巧的Javascript，似乎最简单的方法是在单击按钮后，将滚动仅偏移标题的高度。 您可以对标题高度进行硬编码或动态计算。

所以...

;;;;;;;;;;;;;;
;   $ = document                ;
;   id = 'getElementById'       ;
                    ;;;;;;;;;;;;;

onload = function (e)
{
    $[id]('DemoButton')
    .   onclick = function offset(e)
        {
            document.body.scrollTop -= $[id]('Header').offsetHeight;
        }
    ;
}

笔记

您可能需要将其包装在5ms setTimeout中。 很简单。

我不记得所有的跨文化。 可能需要parseInt或使用document.documentElement 。 但是至少您现在没有跨浏览器滚动事件要处理，所以这应该很好。