Плаваючий сайдбар - дуже просто

Плаваючий сайдбар - дуже просто


Іноді мені на е-mail пишуть з питанням, а як ти зробив такий плаваючий сайдбар. як у тебе зараз на блозі, мовляв шукав і не знайшов, або не виходить реалізувати.

Так ось в цьому пості я покажу простенький код, який це робить, а точніше фіксує потрібний вам блок, при перемотуванні внизу. тобто не відразу фіксує, а коли користувач прокрутив сторінку до цього блоку, тоді цей блок фіксується на місці, або, так би мовити плаває.

Про схожий сайдбарі я згадував тут. але в той спосіб він реально плаває, а тут фіксується.

Крок перший, додаємо цей код в те місце, де буде ваш майбутній плаваючий блок:

(В движку DLE це зазвичай файл main.tpl, а в wordpress-е це файл sidebar.php)

  1. У коді є два значення 500 - це відступ від верхньої межі сайту, до місця, де починається той блок, який повинен буде плавати. Методом тику підберіть ті цифри, які підійдуть для вашого сайту.
  2. А також є значення 300 на 300 - це безпосередньо розмір вашого блоку. Виставте потрібні вам значення, інакше блок буде показуватися в повному обсязі.

Крок другий, якщо у вас не підключена бібліотека jquery

Якщо після першого кроку блок не працює. то перед тегом вставляємо рядок:

Можете підключити бібліотеку jquery по-новіше, якщо хочете. В даному випадку версія 1.3.2.

На цьому все, має працювати.

Єдине з чим може виникнути косяк. так це конфлікт jquery з іншими бібліотеками, які у вас можливо підключені. Вони зазвичай підключені, якщо у вас використовуються на сайті які-небудь слайдери і щось в цьому роді.

UPDATE. Є один мінус цього блоку: якщо він великий, то наїжджає на футер. У такому випадку спробуйте ковзний блок на jQuery. про який я написав в іншій статті.