0

我有一个顶栏和一个底栏，它们固定在视口的顶部和底部。在它们之间是一个地图 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>
4

0 回答 0