Apposer ne fonctionne pas dans le 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 le défilement en bas de la page Bootstrap 4 n'est pas encore ajout de la classe de barre de navigation qui est fixe. Quelqu'un peut me dire comment résoudre ce problème? Bootstrap.js et jQuery.js sont travail.

Avez-vous lu le Bootstrap 4 docs? Si vous le faites, et cela est spécifié dans le Bootstrap 4 docs, vous pouvez créer un problème ici
Tu veux dire l'affixe plugin est tombé?
si apposer est tombé comment on peut faire des choses comme apposer faire?
Voir @vucko de réponse. Je n'ai même pas vérifié les docs ou utilisé Bootstrap 4... juste pour vous rappeler d'une certaine manière. Voir Vucko la réponse pour plus de détails.
LoL je viens de perdre une heure entière lorsque vous essayez de comprendre pourquoi apposer ne fonctionne pas... Il semble que la page, je peux travailler sur utilisé bootstrap v4 et v3 pas... à Partir de maintenant, je vais toujours vérifier si la page est à l'aide de "standard" des versions, pas des "dernières nouvelles à terme" 🙂

OriginalL'auteur Ilyas karim | 2016-04-01

  1. 14

    Bien que l'affixe est retiré de Bootstrap dans la version 4. Cependant, vous pouvez atteindre votre objectif à travers cette jQuery Code:

    $(window).on('scroll', function(event) {
    var scrollValue = $(window).scrollTop();
    if (scrollValue == settings.scrollTopPx || scrollValue > 70) {
         $('.navbar').addClass('fixed-top');
    } 
});
    Je suppose $('.navbar').addClass('navbar'); est censé être $('.navbar').addClass('fixed-top');? Je ne vois pas comment l'ajout d'une classe qu'il a déjà ferait n'importe quoi, sinon.

    OriginalL'auteur Anwar Hussain

  2. 10

    À partir du bootstrap v4 documentation:

    Chuté l'Affixe plugin jQuery. Nous vous recommandons d'utiliser un position: sticky polyfill de la place. Voir le HTML5 Veuillez entrée pour plus de détails et spécifiques polyfill recommandations.

    Si vous étiez à l'aide d'Apposer à appliquer d'autres, non-position les styles, les polyfills ne pouvait pas soutenir votre cas d'utilisation. Une option pour ces utilisations est la troisième partie ScrollPos-Styler bibliothèque.

    important: position: sticky ne fonctionne pas dans google chrome, mais parce que c'est seulement a été de 4 ans car il a été introduit...
    Tout est dit dans le lien.
    Seulement... 😛 pour info il l'habitude de travailler dans google Chrome, jusqu'à ce qu'ils on cassé.

    OriginalL'auteur Vucko

  3. 10

    Mise À Jour De Bootstrap 4

    Les docs recommander le collant polyfill, et le recommandé ScrollPos-Styler n'aident pas vraiment à la position de défilement (vous pouvez facilement définir un décalage).

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

      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 apposer (collant barre de navigation)

    EDIT: une Autre solution est d'utiliser cette le port de la 3.x Apposer plugin comme un remplacement dans le Bootstrap 4..

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

    Connexes: Animer/Rétrécir barre de navigation sur faites défiler à l'aide de Bootstrap 4

    Cela a fonctionné parfaitement, merci. Il travaille également avec scrollspy.

    OriginalL'auteur Zim

  4. 3

    De construire sur Anwar Hussain réponse. J'ai trouvé le succès avec cette:

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

    Cela s'applique à la classe de la barre de navigation lorsque vous faites défiler vers le bas, mais aussi de supprimer la classe lors du défilement arrière. Auparavant, lors du défilement de retour, la classe appliquée de rester appliquée à la barre de navigation.

    OriginalL'auteur Kyle Higginson

  5. 2

    Comme par Vucko de devis dans la Mirgation docs, ScrollPos-Styler bibliothèque qui me convenait assez bien.

    1. Inclure la .js ScrollPos-Styler (scrollPosStyler.js) fichier sur votre page.
    2. À trouver les <div> vous souhaitez faire des "collants"

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

    1. Appliquer sps sps--abv classe

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

    1. Ajouter .css styles que vous souhaitez avoir déclenché une fois que l'élément est devenu collant (Comme par le 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
}

    OriginalL'auteur MackieeE

  6. 1
    $(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');
    }
});
    Ajouter quelques explications pour votre réponse
    exp Bootstrap 3, attr données-spy="apposer" et les données du décalage du top="nombre".

    OriginalL'auteur TranDuc

  7. 0

    Après avoir essayé toutes les solutions que j'ai pu trouver (et en étant conscient que l'affixe a été retiré de bootstrap 4), la seule façon que je pouvais obtenir le désiré collant résultats avais-je besoin pour utiliser collant-kit.

    C'est vraiment simple plugin jQuery qui était facile à mettre en place.

    Il suffit d'inclure le code dans votre projet et attribuer à l'élément que vous voulez coller avec 

    $("#sidebar").stick_in_parent();
    Le point est que je ne pouvais pas obtenir le suggérée 8 lignes de travail. Je ne suis pas un noob avec JS ou CSS. En outre, 8 lignes serait un minimum, il y a d'autres facteurs à prendre en considération tels que les différents types de défilement de l'événement.

    OriginalL'auteur DazBaldwin

  8. 0

    Pour les utilisateurs qui sont à la recherche d'une réponse dans le plus pur Javascript, c'est comment vous pouvez le faire en utilisant Javascript:

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

    OriginalL'auteur Ilyas karim