Pinned Loading

1. CSS Media queries em/psx equivalences CSS Media queries em/psx equivalences

   1

   /* MOBILE FIRST MEDIA QUERIES (base: 1em=16px)

   2

   Common breakpoints: 360px,600px,800px,900px,1120px,1200px,1366px,1400px,1600px,1800px,1920px,2560px */

   3

   @media (min-width: 22.5em)  { /* 360px */ }

   4

   @media (min-width: 37.5em)  { /* 600px */ }

   5

   @media (min-width: 50em)    { /* 800px */ }

2. JS Optimized Scroll detector JS Optimized Scroll detector

   1

   let lastScrollTop = 0;

   2

   const $html = document.documentElement;

   3

   $html.classList.add('near-top');

   4

   window.addEventListener('scroll', () => {

   5

       const currentScrollTop = window.scrollY || document.documentElement.scrollTop;

3. JS Scroll Progress Bar Vanilla js JS Scroll Progress Bar Vanilla js

   1

   <div id="_progress"></div>

   2

   3

   <style>

   4

   #_progress {

   5

       --scroll: 0%;

4. JS Get position element/mouse JS Get position element/mouse

   1

   // Determinar las coordenadas del cursor personalizado en relación con la página no es tan fácil.

   2

   // Normalmente, distintos navegadores definen los valores de algunas propiedades de forma diferente.

   3

   // Solución genérica:

   4

   5

   function getPosition(e) {

5. JS Is Scrolling or not JS Is Scrolling or not

   1

   let scrolling = false;

   2

   3

   window.scroll = () => {

   4

       scrolling = true;

   5

   };

6. CSS outlined-text CSS outlined-text

   1

   .parent {

   2

   background-color: color: #144e7b;

   3

   }

   4

   5

   .outlined {