Question

我所拥有的是顶栏和底栏，它们固定在视口的顶部和底部。在他们之间是一个地图div，javascript变成了谷歌地图，占据了屏幕的其余部分。

但是，在底栏上方是一个display：none元素，其中包含一系列换行符和水平规则。这是我显示其中没有任何内容的列表的临时方式，直到我找到更好的方式来模拟iOS样式列表。（这就是我所指的：http://www.technipages.com/wp-content/uploads/2011/12/iOS-list-of-music-not-on-device.png）如果有人对此提出建议，那就太好了，但这不是主要关注的问题。一个javascript用项填充该列表并清除空行，jQuery函数只需触摸底栏上的按钮即可将列表滑入视图。这一切都运作良好。

当您按下底部的按钮时，列表应向上滑动到地图上并停在顶部栏，然后您可以滚动它。两个酒吧仍在视野中。再次按下按钮可以滑开。

所有这一切的问题在于，在打开列表后，当您滚动列表时，顶部和底部栏会神奇地成为列表的一部分并滚动其他所有项目。这让我感到困惑，因为它们都是固定的，但显然我犯了一个错误。

这是我的代码。所有CSS都是内联的。我还展示了显示列表的jQuery函数;这很简单。我应该注意到，在XCode模拟器中，这非常有效，但是当我在我的itouch上测试它时，我得到了上面的结果。非常混乱。

<head>
<script type="text/javascript">
$("#bottombar").click(function(){
      //alert("Trigger!");
      $("#resultsList").slideToggle("fast");
                  });
</script>
<head>
 <body>

        <div style="position:fixed; top:0px; width:100%; border-bottom: 3px solid; z-index: 19; background:#FFFFFF; padding:5px;"> 
            <a style="text-decoration:none; z-index:20;" href="index.html">Home</a>
        </div>
        <br />

        <div id="map_canvas" style="width:100%; margin-top:10px; height:400px;"></div>

        <div style="position:relative">

            <div id="resultsList" style="background: #FFFFFF; width:100%; margin-top:15px; height: 400px; z-index:1; position:absolute; bottom:0; left:0; display:none">

                <br id="top"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/>
                <hr class="filler"/>
                <br class="filler"/> 

            </div>

        </div>

        <div style="position:fixed; bottom:0px; width:100%; border-top: 3px solid; z-index: 19; background:#FFFFFF; padding:5px;"> 
            <button id="bottombar" type="button" style="z-index:20; padding-bottom:5px;">Show as List</button>
        </div>

    </body>

移动应用程序中的CSS / jQuery问题

0 个答案: