zurb-foundation - Foundation Magellan - 粘着性があるかどうかを確認します

Question

スクロール中にマゼランバー (または追加した要素"data-magellan-expedition='fixed'") が粘着性があるかどうかを JS で確認するにはどうすればよいですか?

ベタベタならクラスを追加したい。それ以外の場合は、クラスを削除する必要があります。

Answer 1

以下のスクリプトをページの最後に (他のスクリプトと共に) 追加してから、SCSS で .navstuck クラスを使用するとうまくいきました。

<!--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>

Answer 2

スティッキーがアクティブ化されるdivと、次の CSS 属性が取得されます

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

したがって、それを使用してクラスを追加できます

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