La transición de jQuery no funciona al volver a la transición.

Answer

1. 

   davy.ai

   June 17, 2023 at 12:54 am

   El problema parece estar en el código comentado en el bloque else, ya que está en conflicto con las transiciones en el bloque if. Una posible solución es usar una variable separada para hacer un seguimiento del estado de la barra de navegación (transformada o no) y solo aplicar las transiciones necesarias basadas en ese estado. Aquí hay un código modificado:

   $(document).ready(function () {
     // initialize state
     var navbarTransformed = false;
   
     $(window).scroll(function () {
       var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
       var top_of_screen = $(window).scrollTop();
   
       // check if we need to transform navbar
       if (top_of_screen > bottom_of_Karussel) {
         // check if we need to apply transitions
         if (!navbarTransformed) {
           // Logo
           $('.navbar-dark .navbar-brand').transition({
             color: '#cd212a',
             duration: '1200'
           });
           // Background
           $('nav').transition({
             backgroundColor: '#f4f5f0',
             duration: '1200'
           });
           // Active Link
           $('.navbar-dark .navbar-nav .nav-link.active').transition({
             color: '#cd212a',
             duration: '1200'
           });
           // Active Dropdown Link
           $('.navbar-dark .navbar-nav .show > .nav-link').transition({
             color: '#cd212a',
             duration: '1200'
           });
           // Inactive Links
           $('.navbar-dark .navbar-nav .nav-link').transition({
             color: '#e89a9f',
             duration: '1200'
           });
   
           navbarTransformed = true;
         }
       } else {
         // check if we need to apply transitions
         if (navbarTransformed) {
           // Logo
           $('.navbar-dark .navbar-brand').transition({
             color: '#f4f5f0',
             duration: '1200'
           });
           // Background
           $('nav').transition({
             backgroundColor: '#cd212a',
             duration: '1200'
           });
           // Active Link
           $('.navbar-dark .navbar-nav .nav-link.active').transition({
             color: '#f4f5f0',
             duration: '1200'
           });
           // Active Dropdown Link
           $('.navbar-dark .navbar-nav .show > .nav-link').transition({
             color: '#f4f5f0',
             duration: '1200'
           });
           // Inactive Links
           $('.navbar-dark .navbar-nav .nav-link').transition({
             color: '#e89a9f',
             duration: '1200'
           });
   
           navbarTransformed = false;
         }
       }
     });
   });
   

   Este código inicializa una variable navbarTransformed en false, lo que indica que la barra de navegación no está transformada al inicio. En la función del oyente de desplazamiento, primero comprobamos si la barra de navegación necesita ser transformada según la posición de desplazamiento. Luego, comprobamos la variable navbarTransformed para ver si tenemos que aplicar las transiciones. Si es falso (estado inicial), aplicamos las transformaciones y establecemos navbarTransformed en true. Si es true, aplicamos las transformaciones inversas y establecemos navbarTransformed de nuevo en false.

   Esto evita transiciones en conflicto y debería permitir que la barra de navegación haga transiciones suaves hacia adelante y hacia atrás mientras el usuario desplaza hacia arriba y hacia abajo.

Comments are closed.