Как реализовать липкий элемент который потом исчезает?

Question

Нужно реализовать липкий элемент только на мобильном разрешении. Т.е при мобильном разрешении "База - Стандарт - Как на Картинке" скользят поверх всей таблицы и когда доходят до таких же значений внизу таблицы - они исчезают.

Пример: click

Подскажите, может есть какие-то плагины или пример кода.

Answer 1

Нашел решение с помощью jquery плагина http://scrollmagic.io/

Answer 2

Грустно, что я не убедил Вас использовать липкое позиционирование через position: sticky. Это работает именно так, как вы описываете, без JS и плагинов:

.container {
  margin: 20em 1em;
  position: relative;
}

table {
  width: 100%;
}

tr {
  background: yellow;
}

tr.last {
  position: sticky;
  bottom: 0px;
  background: rgba(255, 0, 0, 0.7);
}

<div class="container">
  <table>
    <tbody>
      <tr><td>Строка</td></tr>
      <tr><td>Строка</td></tr>
      <tr><td>Строка</td></tr>
      <tr><td>Строка</td></tr>
      <tr><td>Строка</td></tr>
      <tr><td>Строка</td></tr>
      <tr><td>Строка</td></tr>
      <tr><td>Строка</td></tr>
      <tr><td>Строка</td></tr>
      <tr class="last"><td>Строчка-прилипучка</td></tr>
    </tbody>
  </table>
</div>

Чтобы ограничиться мобильным разрешением, нужно обернуть правило в медиа-запрос:

@media screen and (max-width: 479px) {
  .last {
    position: sticky;
    bottom: 0px;
    background: rgba(255, 0, 0, 0.7);
  }
}

БЛОГ НА HUSL

Как реализовать липкий элемент который потом исчезает?

Ответы (2 шт):