Fatal编程技术网
  • jquery/
  • JQuery加载后的基础6粘性菜单（）

JQuery加载后的基础6粘性菜单（）

jquery zurb-foundation

JQuery加载后的基础6粘性菜单（）,jquery,zurb-foundation,sticky,jquery-load,zurb-foundation-6,Jquery,Zurb Foundation,Sticky,Jquery Load,Zurb Foundation 6,我有一个HTML文件，它通过jQuery load（）将其他组件（.HTML文件）加载到其中。在本例中，我从外部html文件加载菜单和页脚，所有内容都正确加载。 我的问题是菜单，我创建了一个粘性菜单与基础6和“粘性”部分不工作…< / P > 如果我直接将html添加到页面中，菜单将按预期工作。但是，当相同的html从外部文件加载到页面中时，菜单会释放其粘性属性 _navigation.html： <div class="nav-container" data-sticky-contain

我有一个HTML文件，它通过jQuery load（）将其他组件（.HTML文件）加载到其中。在本例中，我从外部html文件加载菜单和页脚，所有内容都正确加载。 我的问题是菜单，我创建了一个粘性菜单与基础6和“粘性”部分不工作…< / P > 如果我直接将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>
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>


HTML母版页
指数
我在这里遗漏了什么？

如果调用
$（document.foundation（）
在
$（“footer”）.load（“_footer.html”）
？@Yass我已经做了那个测试，没有任何变化：（如果你在sticky元素上调用
foundation（）
，会怎么样。有一行写着：
。向它添加一个类（例如
sticky footer
），然后尝试调用
$（'.sticky footer'）。foundation（）
。我的问题不在于页脚，而在于导航。不管怎样，我已经尝试了你的建议，但它不起作用。导航没有卡住：-/code如果你在
$（document.footer（）；
之后调用
$（“footer”）。加载（“\u footer.html”）
？@yas我已经做了那个测试，没有任何变化：（如果在sticky元素上调用
foundation（）
，会怎么样。有一行内容是：
。向其中添加一个类（例如
sticky footer
），然后尝试调用
$（'.sticky footer'）。foundation（）
。我的问题不在于页脚，而在于导航。不管怎样，我已经尝试了你的建议，但没有效果。导航没有粘住：-/ 
    <!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>