Question

我正在学习Zurb Foundation，所以这是我第一次尝试网站。我有Stick Top Bar的问题。它“有点”有效，但它在折叠时做了一些奇怪的事情（我的所有项目都会折叠到按钮菜单==小屏幕/窗口）。

问题在于，如果我转到页面底部并单击顶部栏上的“菜单”按钮（在小屏幕/窗口上），页面将显示在顶部。我的英语不是最好的，所以我会按照这个网页预览进行检查，以便查看：

http://okgo.comuv.com/

重现的步骤： 1）调整浏览器窗口的大小，直到顶部栏折叠（顶部栏的移动版本）。 2）向下滚动到底部。 3）点击“菜单”。

我尝试删除页面上几乎所有内容，但问题仍然存在。

以下是代码，您可以查看它：

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Beyond The Sky</title>

    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/foundation.css" />

    <script src="js/vendor/custom.modernizr.js"></script>

    <style type="text/css">
    body, html {
        height: 100%;
        width: 100%
    }

    #homepage {
        background-color: black;
        background-attachment: scroll;
        background-image: url(img/nasabackground.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        height: 100%;
        width: 100%;
    }

    #content {
        background-color: black;
        background-attachment: fixed;
        background-image: url(img/stars.jpg);
        background-position: center center;
        background-repeat: repeat;
    }

    #homepagecontentwrapper {
        height: 100%;
        width: 100%;
        overflow: hidden;
        display: table;
    }

    #maintitlewrapper {
        display: table-cell;
        vertical-align: middle;
    }

    #maintitle {
        color: black;
        font-family: Verdana, sans-serif;
    }

    .centertext {
        text-align: center;
    }
    </style>
</head>

<body>

    <div id="homepage">
        <div id="homepagecontentwrapper">
            <div id="maintitlewrapper">
                <div class="row">
                    <div class="small-12 columns">
                        <h1 id="maintitle">Hello There!<br/>This is a great site. Don't you think?</h1>
                    </div>
                </div>
                <div class="row">
                    <div class="large-2 small-6 columns centertext">
                        <a href="#" class="button">Contacto</a>
                    </div>
                    <div class="large-2 small-6 columns centertext">
                        <a href="#" class="button">Nosotros</a>
                    </div>
                    <div class="large-8 hide-for-small columns">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="contain-to-grid sticky">
        <nav class="top-bar">
                <ul class="title-area">
                    <li class="name"><h1><a href="#">Beyond The Sky</a></h1></li>
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>

            <section class="top-bar-section">
                <ul class="left">
                    <li class="divider"></li>
                    <li class="active"><a href="#">Main Item 1</a></li>
                    <li class="divider"></li>
                    <li><a href="#">Main Item 2</a></li>
                    <li class="divider"></li>
                </ul>
            </section>
        </nav>
    </div>

     <!--Content Placeholder--> 
    <div id="content">
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
    <!--End of Content Placeholder--> 


    <script>
        document.write('<script src=' +
        ('__proto__' in {} ? 'js/vendor/zepto' : 'js/vendor/jquery') +
        '.js><\/script>')
    </script>
    <script src="js/foundation/foundation.js"></script>
    <script src="js/foundation/foundation.alerts.js"></script>
    <script src="js/foundation/foundation.clearing.js"></script>
    <script src="js/foundation/foundation.cookie.js"></script>
    <script src="js/foundation/foundation.dropdown.js"></script>
    <script src="js/foundation/foundation.forms.js"></script>
    <script src="js/foundation/foundation.joyride.js"></script>
    <script src="js/foundation/foundation.magellan.js"></script>
    <script src="js/foundation/foundation.orbit.js"></script>
    <script src="js/foundation/foundation.placeholder.js"></script>
    <script src="js/foundation/foundation.reveal.js"></script>
    <script src="js/foundation/foundation.section.js"></script>
    <script src="js/foundation/foundation.tooltips.js"></script>
    <script src="js/foundation/foundation.topbar.js"></script>
    <script src="js/foundation/foundation.interchange.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

Zurb Foundation 4 - Stick Top Bar奇怪的行为？

0 个答案: