Merge pull request #58 from carlosfernandezcabrero/feature/fix-option…

…s-inputs

Añado comportamiento pegajoso a los inputs de configuración de las animaciones

web/src/pages/index.astro

@@ -88,7 +88,7 @@ export default {
         <span class='ms-3 text-xl font-medium text-gray-900 dark:text-gray-100'>Animate all</span>
       </label>
     </section>  
-    <section class='mb-6 grid md:grid-flow-col grid-flow-row gap-6 columns-4 items-center justify-center'>
+    <section class='mb-6 grid md:grid-flow-col grid-flow-row gap-6 columns-4 items-center justify-center sticky top-0 z-10 pt-2' id="option-inputs">
       <label for="duration" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
         Duration
         <select name="duration" id="duration" class="mt-2 bg-gray-50 min-w-36 border border-gray-300 text-gray-900 text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white">
@@ -180,6 +180,7 @@ export default {
   const $duration: HTMLSelectElement = document.querySelector('#duration')!
   const $steps: HTMLSelectElement = document.querySelector('#steps')!
   const $delay: HTMLSelectElement = document.querySelector('#delay')!
+  const $optionInputs: HTMLElement = document.getElementById('option-inputs')!
 
   // functions to use as events handlers
   // created to add and remove the events depending on the toggle
@@ -279,4 +280,16 @@ export default {
       }
     })
   })
+
+  window.addEventListener('scroll', () => {
+    const isSticky = $optionInputs.getBoundingClientRect().top < 20
+
+    $optionInputs.classList.toggle('is-sticky', isSticky)
+  })
 </script>
+
+<style>
+  .is-sticky {
+    @apply bg-zinc-900/65 backdrop-blur-sm;
+  }
+</style>