[javascript] JointsWP4(SASS):スティッキーでプロパティを変更する


0 Answers

Question

TL:DR:Stickyは実際にJavaScriptを使って変更に反応することができますか? もしそうなら、どうですか?

(このプロジェクトではFoundation 6.2とWordPress 4.4を使用していますが、Node.js / npmとgulp 4.0を使用してテーマをインストールしました。私の質問は太字で示しています)

私はFoundationのSticky Pluginを使ってnav barをstickyにしたいのですが、ボタンをクリックしたときだけです。 これは、DOMがすべて終了したときに、 navバーが「それだけで」スティックするのではなく、ドキュメントの一番上の位置にとどまるようにすることを意味します。 また、スクロールダウンすると消えますが、スクロールしながらスティックします。

navバーは必要なすべてのdiv正しくラップされているので、 navバーはスティックすることができます。 問題は、「追加的な」部分で生じる。 私の考えは、まずPHPを使ってStickyをインスタンス化することでした:

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

その後、click-onで起動したJavaScriptを使用してdata-btm-anchorを現在のスクロール位置に変更します。 これは私が望むだけではうまくいかなかった。 私がこれまでに試したことは:

  1. getElementByIDを使用してからsetAttributeを使用すると、PHPファイルのdata-btm-anchorはFirebugに従って変更されますが、これはnavバーに少し影響しません。 それはどこに残っています。 スティッキーを "元に戻す"必要がありますか?
  2. docsは:

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

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

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

  1. docsまた、私の "sticky_header"にStickyをプログラムで追加することを提案しています。 それがうまくいけば、jQueryオブジェクトを直接変更しようとする可能性があります。 これまで私は、スティッキープラグインを私のヘッダにバインドすることができました:

    1. ボタンがその機能をassets/js/scripts取得する.jsをスローする(そしてgulpを実行する)
    2. 私の<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によると、ヘッダは "sticky"クラスになりました。 しかし、それはまだ動作しません - むしろ、それは不具合です: "ヘッダスペース"は多少崩壊しているので、下の "content" div少し覆っています。 あなたは何を知っています、ヘッダーは固執しません。 それはバグですか?

    理論的には、 var stick逆参照するか、 jQuery('#sticky_header')またはjQuery('.header')を使用して属性を変更できますか?

これらの中でも、jQueryはうまく動作しません。 私はスクリプトで$を使用することで多くの問題を抱えていました。たとえば、これのためにStickyのdestroy()メソッドを実行することはできません(もしうまくいけば、Stickyのインスタンスを破棄してbtmAnchorが新しいスクロール位置に設定された新しいもの)。 これについて別の質問をします。




Related