👩‍💻 Как работает свойство position: sticky в CSS?

Свойство position: sticky позволяет элементу переключаться между относительным и фиксированным позиционированием в зависимости от его прокрутки. Оно фиксирует элемент в определённой точке, пока его родительский контейнер находится в пределах видимости.

➡️ Пример:

<div class="container">
  <h2 class="sticky-header">Я остаюсь на месте!</h2>
  <p>Содержимое...</p>
  <p>Содержимое...</p>
  <p>Содержимое...</p>
</div>

<style>
  .container {
    height: 200px;
    overflow: auto;
    border: 1px solid black;
  }

  .sticky-header {
    position: sticky;
    top: 0; /* Фиксирует элемент у верхнего края контейнера */
    background-color: lightblue;
    padding: 10px;
  }
</style>

🗣️ В этом примере заголовок с классом .sticky-header остаётся на месте, пока пользователь прокручивает содержимое контейнера. Как только прокрутка выходит за пределы контейнера, элемент снова становится относительным.

Свойство sticky удобно для создания фиксированных заголовков таблиц, меню и других интерфейсных элементов, которые должны оставаться видимыми в пределах их контейнера.

CodeBase | Frontend | #css

⚡️3D wave animation — Анимированная галерея с эффектом волны

Технологии: CSS

🔗 Ссылка

CodeBase | Frontend | #animate

🦥Ленивый программист ©

⚙️ Что такое свойство z-index в CSS и зачем оно используется?

z-index управляет порядком наложения элементов на странице. Чем больше значение — тем "выше" элемент расположен относительно других.

Работает только с элементами, у которых задано position (relative, absolute, fixed или sticky).

➡️ Пример:

<div class="box box1">Позади</div>
<div class="box box2">Поверх</div>

<style>
  .box {
    position: absolute;
    width: 200px;
    height: 100px;
    color: white;
    padding: 10px;
  }

  .box1 {
    background: #888;
    top: 50px;
    left: 50px;
    z-index: 1;
  }

  .box2 {
    background: #e74c3c;
    top: 80px;
    left: 80px;
    z-index: 2;
  }
</style>

🗣 В этом примере .box2 перекрывает .box1, потому что у неё z-index: 2.

CodeBase | Frontend | #CSS

🖥 100K юзеров за 3 дня — что сломалось после релиза

Разбор запуска мини-приложения в Telegram: RPS ×10, оптимизация Node.js, борьба с MongoDB и CPU, Grafana, Sentry, Cloudflare. Что сломалось и как починили.

🔗 Ссылка

CodeBase | Frontend | #article

🦥Ленивый программист ©

⚡️Infinitely drawing icons — Интересная анимация загрузки-

Технологии: CSS

🔗 Ссылка

CodeBase | Frontend | #animate

🦥Ленивый программист ©

🦥Ленивый программист ©

👩‍💻 Что такое метод reduce() в JavaScript и как он используется?

reduce() — это метод массивов, который сворачивает все элементы в одно итоговое значение, проходя по массиву слева направо.

Часто применяется для суммирования, подсчёта, объединения или построения новых структур данных.

➡️ Пример:

const numbers = [1, 2, 3, 4, 5];

// Суммируем элементы
const sum = numbers.reduce((acc, num) => acc + num, 0);

console.log(sum); // 15

🗣️ В этом примере:

• acc — аккумулятор (накапливает результат)
• num — текущий элемент массива
• 0 — начальное значение аккумулятора
• Возвращает одно значение, не изменяя исходный массив

reduce() универсален: им можно считать суммы, группировать объекты, строить словари и даже реализовать методы map / filter "вручную"

CodeBase | Frontend | #JS

🦥Ленивый программист ©

🖥 Практическое руководство по иконкам в веб-проектах — Часть 1

Разбираюсь, как правильно использовать иконки в вебе: где встраивать SVG, когда подключать шрифты, зачем нужны viewBox и почему alt не спасёт. Примеры, нюансы, всё своё.

🔗 Ссылка

CodeBase | Frontend | #article