Foundation Magellan - check if it's sticky

Question

How can I check with JS if the Magellan bar (or the element I added "data-magellan-expedition='fixed'") is sticky while scrolling?

I want to add a class if it's sticky. Otherwise the class should be removed.

Answer 1

when the sticky is activated the div gets a css attr of

style="position: fixed; top: 0px;"

thus you can use that to add a class

if ($('#yourElement').css('position') == 'fixed')
{
  // true
}

Answer 2

Adding the below script end of page (with the other scripts) then using the .navstuck class in my SCSS worked for me:

<!--for Sticky Nav per http://codepen.io/zurbchris/pen/rxMaoX-->
      <script>
          $(document).foundation();
          $('.sticky').on('sticky.zf.stuckto:top', function(){
              $(this).addClass('navstuck');
          }).on('sticky.zf.unstuckfrom:top', function(){
              $(this).removeClass('navstuck');
          })
          console.log(Foundation.version);
      </script>