Tengo un div con un encabezado de clase, quiero que su color de fondo cambie a transparente al desplazarse. ¿Cómo puedo hacer eso en javascript? Uso el complemento fullpage.js y solo tengo 2 secciones por cierto.
<body> <div class="header"> CONTENTS HERE </div> <div id="fullPage"> <div class="section bg"> CONTENTS HERE </div> <div class="section aboutme"> CONTENTS HERE </div> </div> </body> .header { background-color: rgba(0, 0, 0, 0.2); text-align: center; padding: 8px 15px; overflow: hidden; min-height: 46px; position: absolute; width: 100%; top: 0; z-index: 999;Puede usar las clases de estado fullpage.js o las devoluciones de llamada para lograr eso.
Aquí hay un ejemplo usando clases de estado de página completa: https://codepen.io/alvarotrigo/pen/VwbxbYR
.fp-viewing-1-0 button{ background: blue; } fp-viewing-1-0 básicamente significa que fullpage.js está en la segunda sección y la primera diapositiva. Por lo tanto, tanto las secciones como las diapositivas usan un índice basado en 0.
Aquí hay otro ejemplo usando devoluciones de llamada: https://codepen.io/alvarotrigo/pen/XbPNQv
Más ejemplos en la documentación de fullpage.js
afterLoad: function(origin, destination, direction){ var loadedSection = this; //using index if(origin.index == 2){ alert("Section 3 ended loading"); } //using anchorLink if(origin.anchor == 'secondSlide'){ alert("Section 2 ended loading"); } }