search

foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.67k stars 5.48k forks source link

requirejs | foundation6 [6.4.2] | sticky | not working #10581

Closed h-e-r-b-e-r-t closed 5 years ago

h-e-r-b-e-r-t commented 7 years ago

Can't get Foundation.Sticky with requirejs working:

Tried everything, there is possible, e.g.: https://github.com/zurb/foundation-sites/issues/8622 https://disqus.com/home/discussion/matznermatzner/loading_non_amd_modules_with_requirejs_part_2_zurb_foundation/

index.html: <script data-main="js/main" src="js/lib/require.js"></script>

js/main.js:

    name: "main",
    baseUrl: "js/lib",
    paths: {
        "jquery": "jquery/jquery",
        "foundation.core": "foundation/foundation.core",
        "util.triggers": "foundation/foundation.util.triggers",
        "util.mediaQuery": "foundation/foundation.util.mediaQuery",
        "foundation.sticky": "foundation/foundation.sticky",
        "foundation.smoothScroll": "foundation/foundation.smoothScroll",
        "foundation.magellan": "foundation/foundation.magellan"
        },
    shim: {
        "foundation.core": {
            deps: ["jquery"],
            exports: "Foundation"
        },
        "util.triggers": {
            deps: ["foundation.core"],
                },
        "util.mediaQuery": {
            deps: ["foundation.core"],
        },
        "foundation.sticky": {
            deps: ["foundation.core"],
        },
        "foundation.smoothScroll": {
                    deps: ["foundation.core"],
        },
        "foundation.magellan": {
                    deps: ["foundation.core"],
        }
    },
    deps: [
        "../app"
        ]
});

app.js:

define([
    "jquery",
    "foundation.core",
    "util.triggers",
    "util.mediaQuery",
    "foundation.sticky",
    "foundation.smoothScroll",
    "foundation.magellan"
  ], function ($,Foundation) {

  //$(document).foundation();  // doesn't work either

  var sticky1 = new Foundation.Sticky($("div[data-sticky-container]"), {marginTop: 1});
  var magellan1 = new Foundation.Magellan($("ul.menu"));  
  });

_CODE IN INDEX.HTML_:
```
<div  data-sticky-container>
            <div id="example-menu" class="top-bar sticky" data-sticky data-options="marginTop:1;" style="width:100%" data-margin-bottom="0">
                    <div class="top-bar-left">
                            <ul class="menu">
                                    <li class="menu-text">Site Title</li>

                            </ul>
                    </div>
                    <div class="top-bar-right">
                            <ul class="menu" data-magellan>
                                    <li><a href="#first" class="">One</a></li>
                                    <li><a href="#second" class="">Two</a></li>
                                    <li><a href="#third" class="">Three</a></li>
                            </ul>
                    </div>
            </div>
        </div>
```

#####################################################

_WITH REQUIREJS_:
```
<div data-sticky-container="" class="sticky-container">
            <div id="example-menu" class="top-bar sticky" data-sticky="gshq71-sticky" data-options="marginTop:1;" style="width:100%" data-margin-bottom="0" data-resize="example-menu" data-mutate="example-menu">
                    <div class="top-bar-left">
                            <ul class="menu">
                                    <li class="menu-text">Site Title</li>

                            </ul>
                    </div>
                    <div class="top-bar-right">
                            <ul class="menu" data-magellan="fn8csw-magellan" data-resize="4b9jvw-magellan" data-scroll="4b9jvw-magellan" id="4b9jvw-magellan">
                                    <li><a href="#first" class="">One</a></li>
                                    <li><a href="#second" class="">Two</a></li>
                                    <li><a href="#third" class="">Three</a></li>
                            </ul>
                    </div>
            </div>
      </div>
```

#####################################################

_INSTEAD WITH FOLLOWING IN INDEX.HTML > FOOTER: WORKING_
```
<script src="js/lib/jquery/jquery.js"></script>
<script src="js/lib/foundation/foundation.core.js"></script>
<script src="js/lib/foundation/foundation.util.triggers.js"></script>
<script src="js/lib/foundation/foundation.util.mediaQuery.js"></script>
<script src="js/lib/foundation/foundation.sticky.js"></script>
<script src="js/lib/foundation/foundation.smoothScroll.js"></script>
<script src="js/lib/foundation/foundation.magellan.js"></script>

<script>
if (typeof $ != 'undefined'  &&  typeof Foundation != 'undefined')  {

    //$(document).foundation(); // WORKS TOO
    var sticky1 = new Foundation.Sticky($("div[data-sticky-container]"), { marginTop:1 });
    var magellan1 = new Foundation.Magellan($("ul.menu"));
</script>
```

RESULTS IN:

<div data-sticky-container="" class="sticky-container" style="height: 54.4px;"><div data-sticky-container="" class="sticky is-stuck is-at-top" data-resize="5gwsj1-sticky" data-mutate="5gwsj1-sticky" data-sticky="xa0fph-sticky" style="max-width: 1260px; margin-top: 1em; top: 0px; bottom: auto;" data-events="mutate">
            <div id="example-menu" class="top-bar sticky" data-sticky="" data-options="marginTop:1;" style="width:100%" data-margin-bottom="0">
                    <div class="top-bar-left">
                            <ul class="menu" data-resize="9uvsx8-magellan" data-scroll="9uvsx8-magellan" id="9uvsx8-magellan" data-magellan="j9h1co-magellan" data-events="scroll">
                                    <li class="menu-text">Site Title</li>

                            </ul>
                    </div>
                    <div class="top-bar-right">
                            <ul class="menu" data-magellan="j9h1co-magellan" data-resize="9uvsx8-magellan" data-scroll="9uvsx8-magellan" id="9uvsx8-magellan" data-events="scroll">
                                    <li><a href="#first" class="">One</a></li>
                                    <li><a href="#second" class="">Two</a></li>
                                    <li><a href="#third" class="">Three</a></li>
                            </ul>
                    </div>
            </div>
        </div></div>
DanielRuf commented 6 years ago

What exactly is the issue here? Does this still happen with the latest develop branch?

DanielRuf commented 5 years ago

Closing as we did not receive any further information.

Feel free to reopen if you have a reproducible testcase for the latest Foundation release.