文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用Javascript单击并使用onScroll还原动态更改空div的高度

问如何使用Javascript单击并使用onScroll还原动态更改空div的高度
EN

Stack Overflow用户

提问于 2015-11-14 00:43:36

回答 1查看 425关注 0票数 1

上下文:我有一个按钮，在页面顶部的标题，我希望访问者跳转到表单部分是在一个较低的位置在同一页。对于一些不变的因素，表单部分隐藏在页面跳转后的标题下，因此我正在考虑在表单之前创建一个新的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';

};

javascript

jquery

css

onclick

onscroll

回答 1

Stack Overflow用户

发布于 2015-11-14 02:33:25

我知道现在很多人都在用较新的CSS作为响应头。我相信它已经使用media queries完成了，我可能会建议更多地研究它。(我有一些经验，这也很容易，也很酷。)

理想情况下，您希望这样的事情发生在没有JavaScript的CSS中。看看你能不能把它弄明白。

使用非常轻的Javascript，似乎最简单的做法是，只要点击按钮，就用标题的高度来抵消滚动。您可以对标题高度进行硬编码或动态计算。

所以..。

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

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

备注

您可能必须将其封装在一个5 5ms的setTimeout中。很简单。

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33703906

复制

相似问题

问如何使用Javascript单击并使用onScroll还原动态更改空div的高度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Javascript单击并使用onScroll还原动态更改空div的高度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Javascript单击并使用onScroll还原动态更改空div的高度
EN