cum să utilizați un șablon de crenguță diferit în funcție de punctul de întrerupere

Cum să ai o modalitate de a folosi diferite șabloane de crenguță în funcție de fereastra de vizualizare sau de a avea variabile de crenguță care oferă informațiile?

Un exemplu a fost folosirea claselor de fond de ten lipicioase pe șabloane de crenguță. Lipiciositatea făcea dezordine pe vizualizarea mobilului

 <div id="sidebar-first" {{ create_attribute({'class': sidebar_first_classes }) }} data-sticky-container>
              <div class="sticky" data-sticky data-top-anchor="sidebar-first:top" data-btm-anchor="main:bottom">
                {{ page.sidebar_first }}

A trebuit să elimin cumva clasele folosind JS:

 funcția dezvăluieSidebar() {
    bara laterală const: HTMLElement | null = document.querySelector('.sidebar-first');
    const sticky: HTMLElement | null = document.querySelector('.sticky');
    dacă (bara laterală != nulă) {
      // Stickyness ne doit pas être opérante sur mobile
      dacă (lipicios != nul) {
        while (sticky.attributes.length > 0) sticky.removeAttribute(sticky.attributes[0].name);
        sticky.classList.remove('sticky');
      }
      sidebar.style.display = 'bloc';
      sidebar.style.height = '320px';
      sidebar.classList.remove('sticky-container');
    }
    const revela = document.querySelector('.reveal-button') ca HTMLElement;
    revela.style.display = 'niciun';
  }