Question

我正在构建一个可在iPhone 4上运行的移动网站（非原生）。我需要有一些“标题”内容，大约80像素高，100％宽，除非用户滑动/拉动，否则总是隐藏向下显示任何显示的内容。

这篇文章几乎完全符合我的要求：

http://inspectelement.com/tutorials/pull-down-for-navigation-a-responsive-solution/

问题在于它比我需要的更复杂，并且做了一些我不需要的东西。我尝试将它连接到我现有的webapp中，但是它提升了所有样式并且不能正常工作。他们使用了许多我不想要的风格。在我花费数小时改变他们的风格并试图找出哪些风格对于下拉效果至关重要以及哪些是无关的之前，我想看看是否有人有更简单的方法来实现这一点。

目标：在我的移动网页上的任意位置向下滑动手指，我隐藏的标题向下滑入视图。释放后，标题向上滑动并再次不可见。我不需要比这更好的东西。

相关问题：当手指向下拉网页时，会触发移动浏览器上的“事件”？那是“onscroll”还是类似的？或移动设备独有的东西？

感谢。

Answer 1

由于您希望在任何显示的内容上发生这种情况，您可以使用锚点来启动标题下方的页面;因此，向下拉页面（向上滚动超过页面的“顶部”）将显示您的标题。您可以使用onload（）javascript事件使页面自动跳转到您的锚点：

<script type="text/javascript">
function load() {
    var urllocation = location.href;
    if(urllocation.indexOf("#anchor") > -1){
        window.location.hash="anchor"; 
    } else {
    return false;
    }
}
</script>
<body onload="load()">

标题隐藏在移动设备上，直到用手指拉下来

1 个答案: