У сьогоднішньому простому уроці ми розглянемо кілька способів створення сайдбара, який знаходиться завжди в зоні видимості. При Скролл вниз сайдбар з необхідною інформацією буде перед очима відвідувачів.
Найпростіший спосіб це використання фіксованого позиціонування. Наш сайдбар знаходиться всередині шару # page-wrap з відносним позиціонуванням, тому сайдбар прекрасно розміститься - нам тільки необхідно зрушити його вліво за допомогою властивості margin.
За допомогою цієї техніки сайдбар завжди залишається на одному і тому ж місці.
У цієї техніки немає нічого особливого, крім непоганого ефекту, який може привернути увагу відвідувачів.
Це досить цікаве рішення. Суть полягає в тому, що у сайдбара зверху є шапка з фоном. Для шапки можна використовувати негативну top margin. Зображення в шапці повинно бути прозорим і використовувати z-index. Виходить, що у верхньому розміщення зображення знаходиться під шапкою сайту, але як тільки користувач прокручує сторінку вниз - зображення виїжджає з-під шапки сайту і прокручується вниз разом з сайдбарі.
Повинно працювати у всіх браузерах.
Сподіваюся, Вам це знадобиться! До нових уроків! Успіхів!
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!