Question

我有一个HTML文件，可以通过jQuery load（）将其他组件（.html文件）加载到其中。在这个例子中，我从外部html文件加载菜单和页脚，并正确加载Everything。我的问题是菜单，我用Foundation 6和＆＃34; sticky＆＃34;创建了一个粘性菜单。部分没有工作......

如果我将html直接添加到页面中，菜单将按预期工作。但是当从外部文件将相同的html加载到页面中时，菜单会丢失其粘性属性。

_navigation.html：

<div class="nav-container" data-sticky-container>
    <div class="" data-sticky data-margin-top='0' data-options="stickTo:top; stickyOn:small;">
        <nav id="myMenu" class="row title-bar">
            <div class="small-12 medium-10 large-10 column">
                <ul class="vertical medium-horizontal menu">                            
                    <li class="active"><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="services.html">Services</a></li>
                </ul>
            </div>

            <div class="small-12 medium-2 large-2 column">
                <ul class="menu align-right">
                    <li class="small-12 column"><a class="alert button hollow" href="contacts.html">Get in Touch!</a></li>
                </ul>
            </div>
        </nav>
    </div>
</div>

app.js：

$(document).foundation();

$( document ).ready(function() {
    $("#navigation").load("_navigation.html", function() {
        $(document).foundation('reflow');
    });


    $("footer").load("_footer.html");
});

的index.html：

    <!doctype html>
    <html class="no-js" lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>HTML Master Page</title>

        <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
        <link rel="stylesheet" href="css/app.css">
    </head>
    <body>

        <div id="navigation"></div>

        <div id="content" class="row column">
            <h1>Index</h1>
        </div>

        <footer class="expanded"></footer>

        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
        <script src="js/app.js"></script>

    </body>
</html>

我在这里缺少什么？

在jQuery Load（）之后的Foundation 6 Sticky菜单

0 个答案: