TL; DR:Stickyは、JavaScriptを使用して加えた変更に実際に反応できますか?もしそうなら、どうですか?
(プロジェクトはFoundation 6.2を使用しており、WordPress 4.4、テーマはNode.js/npmとgulp 4.0を使用してインストールされています。私の質問は詳細に太字でマークされています。)
Foundationのスティッキープラグインを使用してnav
バーをスティッキーにしたいのですが、ボタンをクリックしたときのみです。つまり、DOMがすべて終了しても、nav
バーは「単独で」固定されず、ドキュメントの最上位に留まる必要があります。 さらに、下にスクロールすると消えますが、上にスクロールすると固執します。
nav
バーは、必要なすべてのdiv
sで正しくラップされているため、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
_を現在のスクロール位置に変更します。これはうまくいきませんでした。これまでに試したこと:
getElementByID
を使用し、次にsetAttribute
を使用する場合、PHPファイル内の_data-btm-anchor
_はFirebugに従って変更されますが、それはnav
バーに少しは影響しません。 スティッキーを「再インスタンス化」する必要はありますか?その場合、どのようにですか?JavaScriptでオプションを設定するには、次のようにオブジェクトをコンストラクター関数に渡す必要があります。
_var options = { multiExpand: true, allowAllClosed: false }; var accordion = new Foundation.Accordion($('#some-accordion'), options);
_
つまり、既存のプラグインインスタンスに新しいパラメーターを渡すことができますか?新しい_Foundation.Sticky
_オブジェクトの違いbtmAnchorは、私のjQuery('#sticky_header')
へのオプション配列パラメーターとして、何も起こりませんでした。
docs は、プログラムでStickyを「sticky_header」に追加することも提案しています。それがうまくいった場合は、jQueryオブジェクトを直接変更してみることができます。これまでのところ、Stickyプラグインをヘッダーに正常にバインドすることができました。
assets/js/scripts
_にスローします(次にgulp
を実行します)<header class="header">
_からすべてのデータスティッキータグを削除するため、DOMのロードが完了したときにヘッダーに登録されたスティッキープラグインはありません。プログラムでプラグインを追加する:
_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
を新しいスクロール位置に設定した新しいインスタンスを作成した可能性があります)。これについて別の質問を開きます。
あなたはあなたの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およびクラスで選択できます。それぞれ。