CODEWITHSUNDEEP
zurb-foundationstickymagellan
marcelgo
marcelgo

Reputation: 85

Foundation Magellan - check if it's sticky

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.

Upvotes: 0

Views: 580

Answers (2)

Sheila Dent
Sheila Dent

Reputation: 11

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>

Upvotes: 1

nolawi
nolawi

Reputation: 4649

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
}

Upvotes: 0

Related Questions