{"id":187,"date":"2026-01-13T21:23:10","date_gmt":"2026-01-13T20:23:10","guid":{"rendered":"https:\/\/tacdigital.online\/?post_type=codigos&#038;p=187"},"modified":"2026-01-13T23:18:47","modified_gmt":"2026-01-13T22:18:47","slug":"header-transparente-y-cambiar-de-color-al-hacer-scroll","status":"publish","type":"codigos","link":"https:\/\/tacdigital.online\/en\/codigos\/header-transparente-y-cambiar-de-color-al-hacer-scroll\/","title":{"rendered":"Header Semitransparente con cambio de color al hacer scroll"},"template":"","meta":{"_acf_changed":false},"categoria-codigos":[18],"tags-codigos":[19],"class_list":["post-187","codigos","type-codigos","status-publish","hentry","categoria-codigos-css","tags-codigos-estilos-css"],"acf":{"contenido_codigos":[{"acf_fc_layout":"bloque_texto","contenido-texto":"Para configurar un header que es semitransparente al inicio colocamos el fondo transparente con un color global al 0.2 de opacidad desde el editor de estilos de elementor (el color y la opacidad depende del dise\u00f1o) en capa de fondo, esta opcion es un pseudoelemento \"::Before\" de CSS asi que en codigo debemos asegurarnos de colocar el pseudoelemento.\r\n\r\npara pintar el background del contenedor no es necesario el pseudoelemento ::before.\r\n\r\nEl CSS debe agregarse en el campo de \"Custom CSS\" del contenedor que tendra el efecto sticky.\r\n\r\n&nbsp;"},{"acf_fc_layout":"bloque_codigo","contenido-codigo":"\/* le quita el color semi transparente *\/\r\nselector.elementor-sticky--effects::before {\r\n    background-color: transparent !important;\r\n\t}\r\n\r\n\/* Pinta el background con un color solido *\/\t\r\nselector.elementor-sticky--effects{\r\n    background-color:#fff!important;\r\n\t}\r\n\r\n\/* transici\u00f3n del cambio de color *\/\r\nselector{\r\n    transition: background-color 1.3s ease !important;\r\n\t}","lenguaje-codigo":"css"}],"contenido_codigos_source":{"label":"C\u00f3digos","type":"flexible_content","formatted_value":[{"acf_fc_layout":"bloque_texto","contenido-texto":"<p>Para configurar un header que es semitransparente al inicio colocamos el fondo transparente con un color global al 0.2 de opacidad desde el editor de estilos de elementor (el color y la opacidad depende del dise\u00f1o) en capa de fondo, esta opcion es un pseudoelemento \u00ab::Before\u00bb de CSS asi que en codigo debemos asegurarnos de colocar el pseudoelemento.<\/p>\n<p>para pintar el background del contenedor no es necesario el pseudoelemento ::before.<\/p>\n<p>El CSS debe agregarse en el campo de \u00abCustom CSS\u00bb del contenedor que tendra el efecto sticky.<\/p>\n<p>&nbsp;<\/p>\n"},{"acf_fc_layout":"bloque_codigo","contenido-codigo":"\/* le quita el color semi transparente *\/\r\nselector.elementor-sticky--effects::before {\r\n    background-color: transparent !important;\r\n\t}\r\n\r\n\/* Pinta el background con un color solido *\/\t\r\nselector.elementor-sticky--effects{\r\n    background-color:#fff!important;\r\n\t}\r\n\r\n\/* transici\u00f3n del cambio de color *\/\r\nselector{\r\n    transition: background-color 1.3s ease !important;\r\n\t}","lenguaje-codigo":"css"}]},"autores_codigos":[133],"autores_codigos_source":{"label":"Seleccionar los Autores","type":"relationship","formatted_value":[{"ID":133,"post_author":"1","post_date":"2026-01-13 15:22:55","post_date_gmt":"2026-01-13 14:22:55","post_content":"","post_title":"Kadir Kevin","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"kadir-kevin","to_ping":"","pinged":"","post_modified":"2026-01-13 15:22:55","post_modified_gmt":"2026-01-13 14:22:55","post_content_filtered":"","post_parent":0,"guid":"https:\/\/tacdigital.online\/?post_type=autores&#038;p=133","menu_order":0,"post_type":"autores","post_mime_type":"","comment_count":"0","filter":"raw"}]},"autores_colaboradores":"","autores_colaboradores_source":{"label":"Colaborador","type":"relationship","formatted_value":""}},"_links":{"self":[{"href":"https:\/\/tacdigital.online\/en\/wp-json\/wp\/v2\/codigos\/187","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tacdigital.online\/en\/wp-json\/wp\/v2\/codigos"}],"about":[{"href":"https:\/\/tacdigital.online\/en\/wp-json\/wp\/v2\/types\/codigos"}],"acf:post":[{"embeddable":true,"href":"https:\/\/tacdigital.online\/en\/wp-json\/wp\/v2\/autores\/133"}],"wp:attachment":[{"href":"https:\/\/tacdigital.online\/en\/wp-json\/wp\/v2\/media?parent=187"}],"wp:term":[{"taxonomy":"categoria-codigos","embeddable":true,"href":"https:\/\/tacdigital.online\/en\/wp-json\/wp\/v2\/categoria-codigos?post=187"},{"taxonomy":"tags-codigos","embeddable":true,"href":"https:\/\/tacdigital.online\/en\/wp-json\/wp\/v2\/tags-codigos?post=187"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}