Así que tengo esta barra de navegación con un logo. Me gustaría que el logo de ser grande cuando el usuario está en la sección de encabezado de la página, pero luego se encogen cuando el usuario se desplaza hacia abajo. Una manera de hacer esto?

 <!-- NAVBAR -->
        <nav class="navbar navbar-inverse navbar-toggleable-md fixed-top">

            <button id="nav-btn"class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarDiv"  aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="container">
                <a class="navbar-brand" href="#"><img src="Images/logo.png" width="60px"></a>
                    <div class="collapse navbar-collapse" id="navbarDiv">
                        <ul class="navbar-nav mr-auto">
                            <li class="nav-item">                     
                                <a class="nav-link" href="#home" >Home <span class="sr-only">(current)</span></a>                         
                            </li>                       
                            <li class="nav-item">                         
                                <a class="nav-link" href="#about-us">About</a>                        
                            </li>                       
                            <li class="nav-item">                         
                                <a class="nav-link" href="#pricing">Pricing</a>                       
                            </li>                       
                        </ul>           
                    </div>                  
            </div>              
        </nav>
InformationsquelleAutor Rudi Thiel | 2017-02-25

3 Comentarios

  1. 6

    Usted puede hacer esto con regular JS. Puede desencadenar el cambio con una precisión de píxel, mi ejemplo se disparará cuando tienes 5 píxeles de la parte superior.

    Lugar esta secuencia de comandos en su <head>.

    <script>
    window.onscroll = function() {
      growShrinkLogo()
    };
    
    function growShrinkLogo() {
      var Logo = document.getElementById("Logo")
      if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) {
        Logo.style.width = '30px';
      } else {
        Logo.style.width = '60px';
      }
    }
    </script>

    y reemplazar <img src="Images/logo.png" width="60px"> con <img src="Images/logo.png" style="width:60px" id='Logo'>

    • Esto es perfecto gracias!
    • No hay problema 😉
    • ¿Cómo tendría que cambiar para que desencadena 150px de la parte superior? He cambiado el 5 a 150, pero aún así parece desencadenar en 5px.
    • No importa lo conseguí gracias
    • ¿Por qué esto sólo funciona cuando el script está en el <head> sección y no en un archivo js externo?
    • Estaba a punto de contestar diciendo que debería funcionar…enlace Es la función depende de cuando se hace referencia al archivo JS externo en el documento. Yo prefiero PHP JS..JS parece ser mágico, la mayoría del tiempo.
    • Hago referencia a todos mis JS archivos en la parte inferior de la <body>, empezando con jQuery, a continuación, Bootstrap.js y, a continuación, custom.js. Besause me gustaría utilizar algunas animaciones en jQuery en él.
    • asegúrese de que su JS externo no está en caché. Yo no soy un fan de JQuery, que evita si no es 200% necesario. he actualizado mi JSFiddle ser animados. CSS3 podemos hacer unas bonitas animaciones.
    • He copiado el código de su violín, pero no su trabajo para mí. Estoy usando el chrome, ¿cuál es el cromo equivalente de -webkit-transition? O es que el problema no?
    • Chrome utiliza todavía -webkit – como su proveedor de prefijo específico. Se está trabajando para mí en Chrome v56. Yo hice el cambio de las clases de la imagen del logotipo. Mirar a la consola de tu navegador para obtener más ayuda en el diagnóstico de la falla.

  2. 2

    Usted puede lograr esto mediante JQuery-

    $(document).scroll(function() {
        $('#navbar').css({width: $(this).scrollTop() > 100? "50%":"100%"});
    });

    explicación-
    Cuando el desplazamiento – obtener la navbar elemento, cambiar el CSS de la siguiente manera:
    si scrollTop() < 100 (no estamos en la parte superior de la página) – cambiar el ancho a 50%.
    De lo contrario, cambie a 100% (regular)

  3. 1

    Ten en cuenta que las soluciones propuestas hasta el momento se aplicará la css en cada uno de los eventos de desplazamiento (literalmente, cientos o incluso miles de veces), la disminución de la suavidad de desplazamiento/rendimiento.

    He hecho una pequeña adición a la solución de Robin Wright, que se puede encontrar un violín de aquí para probarlo. Esto asegura que el css sólo se aplica cuando se cruza la frontera de la cabecera (en este caso 150px).

    El código es el siguiente:

    window.onscroll = function() {
      growShrinkLogo()
    };
    
    var Logo = document.getElementById("Logo");
    var endOfDocumentTop = 150;
    var size = 0;
    
    function growShrinkLogo() {
    var scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    
      if (size == 0 && scroll > endOfDocumentTop) {
        Logo.style.width = '30px';
        size = 1;
      } else if(size == 1 && scroll <= endOfDocumentTop){
        Logo.style.width = '60px';
       size = 0;
      }
    }

    PS. en el violín también he añadido una transición para el logotipo.

Dejar respuesta

Please enter your comment!
Please enter your name here