De acuerdo con Bootstrap 3 docs he añadido siguientes atributos para una barra de navegación:

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

Después de desplazarse hacia abajo en la página de Bootstrap 4 no es la adición de la clase a la barra de navegación que se pegue. ¿Alguien puede decirme como solucionar este problema? Bootstrap.js y jQuery.js están trabajando.

Has leído el Bootstrap 4 docs? Si lo hace, y esto se especifica en Bootstrap 4 docs, puede crear un problema aquí
Te refieres al colocar el plugin está caído?
si afijo se quita cómo podemos hacer las cosas como afijo hacer?
Ver a @vucko la respuesta. Ni siquiera he comprobado los documentos o utilizar Bootstrap 4… sólo para recordar de una manera. Véase Vucko la respuesta para más detalles.
LoL acabo de perder una hora entera cuando se trate de averiguar por qué afijo no funciona… parece que la página me pongo a trabajar en usa boostrap v4 y v3 no… a partir De ahora siempre voy a comprobar si la página es el uso de «estándar» de las versiones, no una «última nueva futuros» 🙂

OriginalEl autor Ilyas karim | 2016-04-01

8 Comentarios

  1. 14

    Aunque el afijo se quita de Bootstrap en la versión 4. Sin embargo, usted puede lograr su objetivo a través de este Código jQuery:

    $(window).on('scroll', function(event) {
        var scrollValue = $(window).scrollTop();
        if (scrollValue == settings.scrollTopPx || scrollValue > 70) {
             $('.navbar').addClass('fixed-top');
        } 
    });
    Supongo $('.navbar').addClass('navbar'); se supone que $('.navbar').addClass('fixed-top');? No veo cómo agregar una clase que ya ha haría cualquier cosa, de lo contrario.

    OriginalEl autor Anwar Hussain

  2. 10

    Desde el bootstrap v4 documentación:

    Caído el Afijo plugin de jQuery. Recomendamos el uso de un position: sticky relleno en su lugar. Ver el HTML5 Favor de la entrada para detalles específicos y de relleno recomendaciones.

    Si se utiliza Afijo para aplicar adicional, noposition estilos, los polyfills podría no ser compatible con su caso de uso. Una opción para este tipo de usos es el de terceros ScrollPos-Styler biblioteca.

    importante: position: sticky no funciona en chrome, sin embargo, porque sólo han pasado 4 años desde que se introdujo…
    Todo está dicho en el enlace.
    Sólo… 😛 FYI se utiliza para trabajar en Chrome hasta que se rompió.

    OriginalEl autor Vucko

  3. 10

    Actualización De Bootstrap 4

    Los médicos recomiendan el pegajoso de relleno, y el recomendado ScrollPos-Styler realmente no ayuda con la posición de desplazamiento (usted puede definir un desplazamiento).

    Creo que es más fácil el uso de jQuery para ver el desplazamiento de la ventana y cambiar el CSS de acuerdo a fijo…

      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 afijo (pegajoso de la barra de navegación)

    EDICIÓN: Otra solución es el uso de esta puerto de la 3.x Colocar el plugin como un reemplazo en Bootstrap 4..

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


    Relacionados con: Anime/Reducir NavBar en desplazarse utilizando Bootstrap 4

    Esto funcionó perfectamente, gracias. También funciona con scrollspy.

    OriginalEl autor Zim

  4. 3

    Para construir sobre Anwar Hussain la respuesta. He encontrado el éxito con este:

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

    Esto se aplicará a la clase a la barra de navegación, cuando se desplaza hacia abajo, pero también eliminar la clase cuando el desplazamiento de vuelta. Anteriormente, cuando el desplazamiento de vuelta, el aplicado de la clase quedaría aplicado a la navbar.

    OriginalEl autor Kyle Higginson

  5. 2

    Como por Vucko de la cotización dentro de la Mirgation docs, ScrollPos-Styler biblioteca me convenía bastante bien.

    1. Incluyen la .js ScrollPos-Styler (scrollPosStyler.js) archivo a su página.
    2. Encontrar los relevantes <div> desea hacer ‘pegajoso’

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

    1. Aplicar sps sps--abv clase

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

    1. Agregar .css estilos que desea tener activa una vez que el elemento se ha convertido pegajosa (Como por el página de demostración.

    /** 
     * '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
    }

    OriginalEl autor 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');
        }
    }); 
    Añadir alguna explicación por su respuesta
    exp Bootstrap 3, attr datos-spy=»afijo» de datos y-offset-top=»número».

    OriginalEl autor TranDuc

  7. 0

    Después de probar todas las soluciones que pude encontrar (y siendo conscientes de que pegue fue retirado de bootstrap 4), la única manera de conseguir la deseada pegajosa resultados que necesitaba era a utilizar sticky-kit.

    Este es realmente simple plugin de jQuery que era fácil de configurar.

    Sólo tienes que incluir el código en el proyecto y, a continuación, asignar el elemento que quiere seguir con

    $("#sidebar").stick_in_parent();
    El punto es que no podía recibir la propuesta de 8 líneas de trabajo. Yo no soy exactamente un noob con JS o CSS. Además, 8 líneas sería de un mínimo, hay otros factores a tomar en cuenta, tales como diferentes tipos de eventos de desplazamiento.

    OriginalEl autor DazBaldwin

  8. 0

    Para los usuarios que están buscando una respuesta en Javascript puro, esta es la forma en que usted puede hacer esto mediante el uso de Javascript puro:

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

    OriginalEl autor Ilyas karim

Dejar respuesta

Please enter your comment!
Please enter your name here