Encontré un código en línea que reduce el encabezado, agregué un código a idd para que el logotipo se encoja al desplazarse.

Ahora quiero agregar una transición para que el logotipo cambie de tamaño con el mismo efecto que el encabezado. Parece que no puedo hacerlo funcionar.

JavaScript

 add_action( 'wp_head', function () { ?> <script> // logo laten krimpen window.onscroll = function() { growShrinkLogo() }; function growShrinkLogo() { var Logo = document.getElementById("Logo") if (document.body.scrollTop > 5 || document.documentElement.scrollTop > 5) { Logo.style.width = '80px'; } else { Logo.style.width = '150px'; } } // resize header jQuery(function($){ $(window).scroll(function() { if ($(document).scrollTop() > 30) { $('#section-padding').addClass('reduce-section-padding'); $('#row-width').addClass('increase-row-width'); } else { $('#section-padding').removeClass('reduce-section-padding'); $('#section-padding').addClass('slow-transition'); $('#row-width').removeClass('increase-row-width'); $('#row-width').addClass('slow-transition'); } }); }); </script> <?php } );

Y aquí está el css:

 .reduce-section-padding { transition: all 0.9s ease-out 0s; padding-top: 0px !important; padding-bottom: 0px !important; margin-top: 0px !important; } .increase-row-width { transition: all 0.9s ease-out 0s; width: 100% !important; } .slow-transition { transition: all 0.9s ease-out 0s; } #main-content { margin-top: 0vw; }

Agregué la transición lenta de la clase css de javascript al logotipo, pero no parecía funcionar.

Espero que alguien note algo sobre el código que yo no.