JointsWP4（SASS）：スティッキーのプロパティの変更

TL; DR：Stickyは、JavaScriptを使用して加えた変更に実際に反応できますか？もしそうなら、どうですか？

（プロジェクトはFoundation 6.2とWordPress 4.4を使用しており、テーマはNode.js / npmとgulp 4.0を使用してインストールされています。私の質問は、詳細には太字でマークされています。）

navFoundationのスティッキープラグインを使用してバーをスティッキーにしたいのですが、ボタンをクリックしたときだけです。つまり、DOMがすべて終了しても、navバーは「それ自体」に固執するのではなく、ドキュメントの一番上の位置に留まります。さらに、下にスクロールすると消えますが、上にスクロールすると固執します。

navバーが正しく、すべての必要に包まれているdivので、S navバーが固執することができます。「追加」の部分で問題が発生します。私のアイデアは、最初にPHPを使用してスティッキーをインスタンス化することでした：

<div data-sticky-container>
  <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1" 
    data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

その後、data-btm-anchorクリックで起動するJavaScriptを使用して、現在のスクロール位置に変更します。これはうまくいきませんでした。これまでに試したこと：

1. 使用する場合はgetElementByID、その後とsetAttribute、data-btm-anchorPHPファイルの中には、Firebugのに応じて変更を行いますが、それは影響しないnavバーを少し。それはどこにでも留まります。スティッキーを「再インスタンス化」する必要はありますか。
2. ドキュメントが言及します：

JavaScriptでオプションを設定するには、次のようにオブジェクトをコンストラクター関数に渡す必要があります。

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

つまり、既存のプラグインインスタンスに新しいパラメータを渡すことができるということですか。オプションの配列パラメーターとして、Foundation.Sticky異なるbtmAnchorだけを含む新しいオブジェクトをmyに渡してjQuery('#sticky_header')も、何も起こりませんでした。

3. ドキュメントはまた、私の「sticky_header」にスティッキーを追加するプログラムで提案しています。それがうまくいった場合は、jQueryオブジェクトを直接変更してみることができます。これまでのところ、Stickyプラグインをヘッダーに正常にバインドすることができました。

   1. ボタンがその機能を取得する.jsをスローするassets/js/scripts（そして実行するgulp）
   2. すべてのデータスティッキータグをmyから削除する<header class="header">ため、DOMの読み込みが完了したときにヘッダーに登録されたスティッキープラグインはありません。

   3. プログラムでプラグインを追加する：

      function button_fire(){
        var options = {
          topAnchor:"1",
          btmAnchor:"footer:top",
          marginTop:"1"
        };
        var stick = new Foundation.Sticky(jQuery('.header'), options);
      }
      

   Firebugによると、ヘッダーは「スティッキー」クラスを取得します。しかし、それでも機能しません-むしろ、グリッチです。「ヘッダースペース」は多少折りたたまれているため、div下の「コンテンツ」をわずかに覆っています。何を知っている、ヘッダーが付いていない。それはバグですか？

   それがうまくいくと仮定し、「鮮やか」今、私は逆参照によって属性を変更することが理論的にできる午前var stickまたは使用しますjQuery('#sticky_header')かjQuery('.header')？

とりわけ、jQueryは期待どおりに機能しません。$スクリプトでの使用に多くの問題があり、たとえば、destroy()これが原因でスティッキーのメソッドを実行できません（機能した場合、スティッキーのインスタンスを破棄して新しいインスタンスを作成した可能性があります）btmAnchor新しいスクロール位置へのセット）。これについて別の質問を開きます。

あなたはあなたのscssでsticky css属性を使うことができます。

htmlまたはphpで、コンポーネントにクラスを追加します。

<div data-sticky-container class="sticky-container">

そしてscssまたはcssで：

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10; 
}

必要な上から距離を置いてください！

jqueryを完全に使用してスティッキーを制御することをお勧めします。

$(document).ready(function(){
    $('<Your button>').click(function () {
        $('html, body').animate({scrollTop: $('<where you want to go>').offset().top}, 1000);
    });

これを使用すると、ボタンでWebサイトの任意の部分にスクロールできます。

スティッキーの場合、最初のセクションを超えてスクロールしたときにのみ、スティッキークラスを追加します。

$(document).ready(function(){
    $(<Section name after which you want sticky to appear>).waypoint(function(direction){
        if (direction == "down"){
           $('nav').addClass('sticky');
           }else{
               $('nav').removeClass('sticky');
           }
    }, {
        offset: '60px'
    });

});

waypointsプラグインを使用すると、要素またはセクションを超えてスクロールしたときに、スティッキークラスを簡単に追加できます。jqueryセレクターは、＃とを使用して、IDとクラスで選択できます。それぞれ。

wordpressを使用すると、jQueryが自動的にキューに入れられます。

WordPressでJQueryを使用するには2つの方法があります。

代わりにJQueryを使用してください$

Wordpressは彼の非競合モードでJQueryを実行するため、代わりにJqueryを使用する必要があります$

あなたの場合

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion(JQuery('#some-accordion'), options);

変数のように$を使用する

$を使用することもできますが、次のような変数を定義する必要があります。

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);