Question

上下文：标题页面顶部有一个按钮，我希望访问者跳转到位于同一页面下方位置的表单部分。对于一些不可更改的因素，表单部分隐藏在页面跳转后的标题下，所以我想在表单之前创建一个新的div并更改div的高度以在跳转后将表单向下推。然后，当用户再次在页面上滚动时，高度应该回到0.
问题：当我第一次点击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。但至少你现在没有跨浏览器滚动事件来处理，所以这应该很好。

如何使用Javascript onclick动态更改空div的高度，并使用onScroll

1 个答案:

注释