1

Añadi CSS y con JQuery hago que cuando el usuario hace scroll, la NavBar se "comprima" junto con el logo, el problema es que cuando se hace scroll la navBar hace un comportamiento raro y "brinca". ¿como puedo arreglar ese detalle?

Enlace al código en acción

Gif del Problema

y me gustaría que se pudiera "comprimir" como la navbar de este sitio Sitio ejemplo

2
  • Deberias agregar tu codigo.
    – alanfcm
    Commented el 10 ago. 2018 a las 17:04
  • por eso puse el enlace a codePen, ahí está mi código Commented el 10 ago. 2018 a las 17:05

2 respuestas 2

1
  • Cambia el position: sticky por position: fixed y añade un width: 100% a tu navbar en tu archivo CSS:

    .navbar {
        position: fixed;
        width: 100%
    }
    
  • Quita la clase sticky-top de tu navbar.

  • Puesto que position: fixed, a diferencia de sticky, saca al elemento del flujo del documento, tienes que darle un margen vertical al contenido. "Envuelve" tu contenido en un div con una clase, digamos, .content, y añade

    .content {
        margin-top: 220px
    }
    

    a tu archivo CSS.

Y... eso es todo. Dado que ahora el navbar está fuera del flujo del documento, su animación no cambia el valor del scrollTop de la ventana, lo que sí hace cuando está con el valor de sticky en la posición. Al no haber cambio de valor, la animación en sí no dispara el evento scroll, y no se produce el "rebote".

1
  • ¡Gracias!, justo lo que buscaba. muchas gracias y tu explicación clara y concisa. problema resulto Commented el 10 ago. 2018 a las 18:16
0

Intentalo con esta funcion debounce. Algo asi:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};
    $(window).scroll(debounce(function() {    
        var scroll = $(window).scrollTop();

         //>=, not <=
        if (scroll >= 50) {
            //clearHeader, not clearheader - caps H
             $(".navbar-brand").addClass("navbar-shrink");
             $(".navbar").addClass("nav-shrink");
            $(".logo-navbar").addClass("img-shrink");
        }
      else{
        $(".logo-navbar").removeClass("img-shrink");
         $(".navbar").removeClass("nav-shrink");
         $(".navbar-brand").removeClass("navbar-shrink");

      }
    }, 25));
1
  • ya lo probé y sigue igual. Commented el 10 ago. 2018 a las 18:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.