Menu icon Foundation
Foundation 6 and RequireJS - Sticky Header

Hey guys,

I'm using Foundation for Sites with requireJS for quite a while now. And it workes like charm - exept for sticky elements.

 

The Include of RequireJS in HTML looks like this:

<script data-main="res/js/main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js" async></script>


And here is my main.js file:

requirejs.config({
  paths: {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min',
    'foundation': 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min'
  },
  shim: {
    'foundation': {
      deps: ['jquery'],
      exports: 'Foundation'
    }
  }
});


requirejs(['jquery', 'foundation'], function($){

  $(document).foundation();

});

 

The strange thing is, Foundation Components like Interchange work all the time, without a problem. But with Sticky its a different thing. Sticky works maybe in one of five page reloads. Most of the time the CSS Classes have been set, but the Event Listener for Scroll is not present.

Any ideas? I'm confused..

 

requireJSamdsticky

Hey guys,

I'm using Foundation for Sites with requireJS for quite a while now. And it workes like charm - exept for sticky elements.

 

The Include of RequireJS in HTML looks like this:

<script data-main="res/js/main.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js" async></script>


And here is my main.js file:

requirejs.config({
  paths: {
    'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min',
    'foundation': 'https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.min'
  },
  shim: {
    'foundation': {
      deps: ['jquery'],
      exports: 'Foundation'
    }
  }
});


requirejs(['jquery', 'foundation'], function($){

  $(document).foundation();

});

 

The strange thing is, Foundation Components like Interchange work all the time, without a problem. But with Sticky its a different thing. Sticky works maybe in one of five page reloads. Most of the time the CSS Classes have been set, but the Event Listener for Scroll is not present.

Any ideas? I'm confused..

 

laila singhy over 1 year ago