web-dev-qa-db-fra.com

L'affixe ne fonctionne pas dans Bootstrap 4 (alpha)

Selon Bootstrap 3 docs, j'ai ajouté les attributs suivants à une barre de navigation:

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

Après avoir fait défiler la page, Bootstrap 4 n’ajoute pas de classe à la barre de navigation qui est affixée. Quelqu'un peut-il me dire comment résoudre ce problème? Bootstrap.js et jQuery.js fonctionnent.

javascriptcsstwitter-bootstrapaffixbootstrap-4
9
Ilyas karim

Bien que l'affixe soit supprimé de Bootstrap dans la version 4. Toutefois, vous pouvez atteindre votre objectif avec ce code jQuery:

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

À partir de la documentation de bootstrap v4:

Supprimé le plugin Affix jQuery. Nous vous recommandons d'utiliser plutôt un position: sticky polyfill. Voir l'entrée HTML5 Please pour plus de détails et des recommandations spécifiques sur Polyfill.

Si vous utilisiez Affix pour appliquer des styles supplémentaires non -position, il est possible que les remplissages multiples ne prennent pas en charge votre cas d'utilisation. Une option pour de telles utilisations est la bibliothèque tierce ScrollPos-Styler .

10
Vucko

Update Bootstrap 4

Les docs recommandent le polyfill collant, et le ScrollPos-Styler recommandé n’aide pas vraiment la position du défilement (vous pouvez facilement définir un décalage).

Je pense que c'est plus facile d'utiliser jQuery pour regarder la fenêtre défiler et changer le CSS en conséquence ...

  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));
  });

Affixe Bootstrap 4 (barre de navigation collante)

EDIT: Une autre solution consiste à utiliser ce port du plugin 3.x Affix en remplacement dans Bootstrap 4 ..

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

Connexes: Animate/Shrink NavBar on scroll avec Bootstrap 4

10
Zim

Selon la citation de Vucko dans les documents Mirgation, ScrollPos-Styler library me convenait assez bien. 

  1. Incluez le fichier .js ScrollPos-Styler (scrollPosStyler.js) sur votre page.
  2. Trouvez le <div> pertinent que vous souhaitez rendre 'collant'

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

  1. Appliquer sps sps--abv classe

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

  1. Ajoutez les styles .css que vous souhaitez déclencher une fois que l’élément est devenu collant (Selon la page de démonstration .
/** 
 * '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

S'appuyer sur la réponse d'Anwar Hussain. J'ai trouvé le succès avec ceci:

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

Cela appliquera la classe à la barre de navigation lors du défilement, mais supprimera également la classe lors du défilement. Auparavant, lors du défilement, la classe appliquée restait appliquée à la barre de navigation.

2
Kyle Higginson
$(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

Pour les utilisateurs qui recherchent une réponse en Javascript pur, voici comment procéder:

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

Après avoir essayé toutes les solutions que je pouvais trouver (et sachant que cet affixe avait été retiré de bootstrap 4), la seule façon d'obtenir les résultats collants souhaités était d'utiliser sticky-kit .

C’est un plugin jQuery très simple et facile à configurer.

Il suffit d’inclure le code dans votre projet, puis d’affecter l’élément que vous souhaitez conserver. 

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