javascript - Jquery window.scrollTo 导致页面卡住

Question

我正在重新设计一个具有 100% 屏幕高度标题的网站，当用户开始滚动时需要将其缩小到 0 像素。我遇到的问题是标题缩小到 0px 后，页面内容略高于窗口顶部。我试过在标题缩小后使用“window.scrollTo(0,0)”，这很有效，但在那之后我不能滚动任何东西。我的页面卡在顶部？演示 --> http://test-sandbox.000webhostapp.com

有没有人建议如何让页面保持滚动？或者可能是一种使页眉动画化以使内容不会超过页面顶部的方法？

Answer 1

看起来这是因为当您滚动并将标题的高度缩小为 0 时，div #headerlogo 的高度设置为 160px。将高度设置为 150px 对我有用。我在 Chrome 中对此进行了测试，它运行良好。您提供的代码在 Firefox 中正常工作，并且转换在 IE 中运行异常。您应该为所有浏览器添加适当的转换声明。

    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
     transition: background-color 500ms ease-out 1s;