1

Zurb Foundation を学んでいるので、これが初めての Web サイトの試みです。スティックトップバーに問題があります。それは「ちょっと」機能しますが、折りたたむと奇妙なことが起こります（すべてのアイテムがボタンメニュー==小さな画面/ウィンドウに折りたたまれます）。

問題は、ページの下部に移動して上部バー (小さな画面/ウィンドウ) の [メニュー] ボタンをクリックすると、ページが上部に移動することです。私の英語力はあまりよくないので、このウェブページのプレビューを公開しますので、チェックしてみてください。

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>
4

0 に答える 0