При прокрутке колесика вниз - кнопка подымается вверх экрана. Это обычное поведение всех элементов. Но наша задача сделать так, что бы кнопка задержалась вверху экрана и не ушла выше. Задержалась и замерла в своей секции. Как только секция закончиться, то кнопка скрывается вверху экрана и уступает место следующей секции. Верстаем простенький шаблон. Хэдеру и Футеру делаем фон серенький и задаем высоту около 100 пикселей. А в контенте будут секции, которые разбиваем на три одинаковые колонки. В первой колонке будет только кнопка, с которой будем работать. А в двух остальных - произвольный текст. И продублируем эту секцию четыре раза. Для массовости. Все шаблон готов. Далее нам нужно отслеживать viewport - видимый контент. Когда блок, в которой находится кнопка, прибывает в зоне видимости, то кнопку необходимо фиксировать в верхней части, когда она ее достигнет. Такое можно добиться свойством css sticky. Остается только добавлять и удалять его к нашей кнопке в нужный момент. Стак
Всю информацию беру в основном из ютуб канала - https://www.youtube.com/@DaveGrayTeachesCode Начинаем с установки Visual Studio Code - https://code.visualstudio.com/download Node package manager - https://www.npmjs.com/ Tailwind CSS - https://tailwindcss.com/ В VS code устанавливаем Live Server, где в настройках добавляем галочку на Full reload Обращаем внимание какая тема виндовс у вас установлена: Темная или Светлая. Будущий сайт построеный с помощью TailWind может учитывать эти настройки. (Пуск - Настройки - Персонализация - Цвета) @apply ошибка при сохранении. Лишние пробелы. Автоматическое форматирование CSS При работе с Tailwind CSS могут возникать ошибки. Например, когда применяете @apply, то при сохранении файла могу произойти автоматическое форматирование документа, такое как пробелы, которые Tailwind считает за ошибку. Что бы их убрать эту ошибку нужно в настройка Visual Studio Code прописать в поиске CSS Format. И убрать галочку с CSS Format Enable Для перфекционистов Н