web-dev-qa-db-ja.com

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

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

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

Foundationのスティッキープラグインを使用してnavバーをスティッキーにしたいのですが、ボタンをクリックしたときのみです。つまり、DOMがすべて終了しても、navバーは「単独で」固定されず、ドキュメントの最上位に留まる必要があります。 さらに、下にスクロールすると消えますが、上にスクロールすると固執します。

navバーは、必要なすべてのdivsで正しくラップされているため、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>
_

その後、クリックで発生する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_オブジェクトの違いbtmAnchorは、私のjQuery('#sticky_header')へのオプション配列パラメーターとして、何も起こりませんでした。

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

    1. ボタンがその機能を取得する.jsを_assets/js/scripts_にスローします（次に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によると、ヘッダーは「スティッキー」クラスを取得します。しかし、それでも機能しません-むしろ、グリッチです。「ヘッダースペース」は多少折りたたまれているため、以下の「コンテンツ」divをわずかに覆っています。何を知っている、ヘッダーが付いていない。それはバグですか？

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

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

javascriptjquerywordpresszurb-foundationzurb-foundation-6
100
Samuel LOL Hackson

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

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

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

そしてscssまたはcssで：

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

今すぐ、必要な上からの距離を置いてください！

1
Vincent Roy

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およびクラスで選択できます。それぞれ。

0
Jaskeerat Singh Sarin