Фіксований плаваючий блок при прокручуванні, дизайн і розробка сайту

Доброго времени суток 🙂
Сьогодні мова піде про один із способів як зробити Фіксований блок, який при прокручуванні рухається з затримкою, приклад видно на моєму сайті справа. Ще одним безсумнівним плюсом є те що блок не зміщується при горизонтальній прокрутці, він залишається у своїй зоні. Якщо зафіксувати звичайним властивістю position: fixed. то на жаль таких переваг не буде. Для мене плавне переміщення з затримкою було не особливо важливим, а ось те що блок залишається на своєму місці при горизонтальній прокрутці, це була основна задача.
Загалом вистачить міркувати, давайте вже щось робити.

1. HTML розмітка

2. Скрипт фіксації

Як і завжди в підвалі перед закривається body або якщо ви віддаєте перевагу, в шапці перед закривається head

У четвертому рядку можете встановити значення Padding від верхнього краю. У 11 рядку якщо потрібно міняємо значення margin від верхнього краю. За замовчуванням вони стоять 0. Просто пишіть величину в пікселях, але просто цифру, наприклад 100.

Ставте тільки цифри, позначення в пікселях - px вказувати не треба!

3. CSS стилі

Далі в файлі стилів style.css. додаємо наступний код.
Ширину міняйте, стилі додавайте, але position: absolute не чіпайте. Це основна умова в стилях для коректного відображення фіксованого блоку.

Зробивши все за інструкцією, результат не змусить себе чекати. Тепер можете організувати то що Вам потрібно.
На цьому все, спасибі за увагу 🙂

Якщо Вам був корисним моя праця, можете підтримати сайт :)

Привіт дорогий друже

У тебе встановлено розширення AdBlock або подібне. Додай мій сайт в білий список, і тим самим внесеш свій внесок в його розвиток. Інструкція як відключити AdBlock Хочу й собі віконце