web-dev-qa-db-ja.com

接辞はBootstrap 4（アルファ）

Bootstrap 3のドキュメントによると、次の属性をnavbarに追加しました。

<nav class="navbar no-margin-bottom" data-spy="affix" data-offset-top="90" >
...
</nav>

ページを下にスクロールした後Bootstrap 4は接尾辞であるnavbarにクラスを追加しません。この問題を解決する方法を教えてもらえますか？Bootstrap.jsおよびjQuery.jsは動作しています。

javascriptcsstwitter-bootstrapaffixbootstrap-4
11
Ilyas karim

バージョン4のBootstrap=から接辞が削除されますが、このjQueryコードを使用して目標を達成できます。

$(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue == settings.scrollTopPx || scrollValue > 70) {
         $('.navbar').addClass('fixed-top');
    } 
});
15
Anwar Hussain

Update Bootstrap 4

このドキュメントでは、スティッキーポリフィルが推奨されていますが、推奨されるScrollPos-Stylerはスクロール位置にはあまり役立ちません（オフセットは簡単に定義できます）。

私はそれがeasierだと思いますjQueryを使用してウィンドウのスクロールを監視し、それに応じてCSSを固定に変更します...

  var toggleAffix = function(affixElement, wrapper, scrollElement) {

    var height = affixElement.outerHeight(),
        top = wrapper.offset().top;

    if (scrollElement.scrollTop() >= top){
        wrapper.height(height);
        affixElement.addClass("affix");
    }
    else {
        affixElement.removeClass("affix");
        wrapper.height('auto');
    }

  };


  $('[data-toggle="affix"]').each(function() {
    var ele = $(this),
        wrapper = $('<div></div>');

    ele.before(wrapper);
    $(window).on('scroll resize', function() {
        toggleAffix(ele, wrapper, $(this));
    });

    // init
    toggleAffix(ele, wrapper, $(window));
  });

Bootstrap 4 affix（sticky navbar）

EDIT：別の解決策は、3.x Affixプラグインのこの ポートを使用することです Bootstrap 4。

http://www.codeply.com/go/HmY7DLHLkI

関連： Bootstrap 4 を使用してスクロール時にNavBarをアニメーション化/縮小する

11
Zim

bootstrap v4 documentation： から

破棄Affix jQueryプラグイン。代わりにposition: stickyポリフィルを使用することをお勧めします。 HTML5のエントリをご覧ください 詳細および特定のポリフィルの推奨事項について。

Affixを使用して追加の非positionスタイルを適用する場合、ポリフィルはユースケースをサポートしない可能性があります。そのような用途の1つのオプションは、サードパーティの ScrollPos-Styler ライブラリです。

10
Vucko

Anwar Hussainの答えに基づいて作成します。私はこれで成功しました：

$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue > 120) {
        $('.navbar').addClass('affix');
    } else{
        $('.navbar').removeClass('affix');
    }
});

これにより、下にスクロールするとクラスがnavbarに適用されますが、上にスクロールするとクラスも削除されます。以前は、上にスクロールすると、適用されたクラスはnavbarに適用されたままでした。

3
Kyle Higginson

Mirgationのドキュメント内のVuckoの引用によると、 ScrollPos-Styler ライブラリは私に非常に適していました。

  1. .js ScrollPos-Styler（scrollPosStyler.js）ファイルをページに含めます。
  2. 「スティッキー」にしたい関連<div>を見つけます

<nav class="navbar navbar-toggleable-md">

  1. sps sps--abvクラスを適用

<nav class="navbar navbar-toggleable-md sps sps--abv">

  1. 要素がスティッキーになったらトリガーしたい.cssスタイルを追加します（ デモページ に従って）。
/** 
 * 'Shared Styles' 
**/
.sps {

}

/** 
 * 'Sticky Above' 
 *
 * Styles you wish to apply
 * Once stick has not yet been applied
**/
.sps--abv {
   padding: 10px
}

/** 
 * 'Sticky Below' 
 *
 * Styles you wish to apply
*  Once stick has been applied
**/
.sps--blw {
   padding: 2px
}
2
MackieeE
$(window).on('scroll', function (event) {
    var scrollValue = $(window).scrollTop();
    var offset = $('[data-spy="affix"]').attr('data-offset-top');
    if (scrollValue > offset) {
        $('[data-spy="affix"]').addClass('affix-top');
        var width = $('[data-spy="affix"]').parent().width();
        $('.affix-top').css('width', width);
    } else{
        $('[data-spy="affix"]').removeClass('affix-top');
    }
});
1
TranDuc

純粋なJavascriptで答えを探しているユーザーにとって、これは純粋なJavascriptを使用してそれを行う方法です。

window.onscroll = (e) => {
    let scrollValue = window.scrollY;
    if (scrollValue > 120) {
        document.querySelector('.navbar').classList.add('affix');
    } else{
        document.querySelector('.navbar').classList.remove('affix');
    }
}
0
Ilyas karim

すべての解決策を試した後（およびbootstrap 4）から接辞が削除されたことを認識して、必要な粘着性の結果を得る唯一の方法は sticky-キット 。

これは非常にシンプルなjQueryプラグインで、セットアップが簡単でした。

プロジェクトにコードを含めて、固執したい要素を割り当てるだけです

$("#sidebar").stick_in_parent();
0
DazBaldwin

bootstrap 4のクラスの固定トップを使用し、addClassとremoveClassを使用する

$(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if ( scrollValue > 70) {
         $('.navbar-sticky').addClass('fixed-top');
    }else{
       $('.navbar-sticky').removeClass('fixed-top');
    }
});
0
Vahid Alvandi