«Плавающий» сайдбар

Рубрика « Картинки » | 13 комментариев

Блок виджета при прокрутке фиксируется вверху страницы.
javascript для вставки в виджет сайдбара:

<script language="javascript">
$(document).ready(function(){ var floatsidebar = $("#float-sidebar");
var offset = floatsidebar.offset(); var left = offset.left;
var top = offset.top; var width = $("#float-sidebar").width();
var height = $("#float-sidebar").height();
$(window).scroll(function(){ var scrollTop = $(window).scrollTop();
if (scrollTop >= top) { $('#float-sidebar').css({ left:left+'px', position:'fixed', top:"70px", width:width+"px" });
} else {  $('#float-sidebar').css({ position:'static', }); } }); }); </script>

Под этим кодом пропишите адреса картинок и ссылок в диве float-sidebar .

Примерно так:

<div id="float-sidebar">
<a href="http://сайт.ru" target="_blank">
<img style="margin:0 0 10px;" src="http://сайт.ru/wp-content/uploads/../../картинка.png">
<a href="http://сайт.ru" target="_blank">
<img style="margin:0 0 10px;" src="http://сайт.ru/wp-content/uploads/../../картинка.png"> 
<a href="сайт.ru/" target="_blank">
<img  src="http://сайт.ru/wp-content/uploads/../../картинка.png"></div>

href=» « — ссылка, src=» « — картинка.
Посмотреть пример можно на сайте Галины Нагорной: http://myrassilka.ru/

13 комментариев к статье “«Плавающий» сайдбар

  • Здравствуйте!
    Новинки и оживление внешнего вида для своего детища никогда не станут лишними, так что надо приниматься за работу.
    Очень интересное оформление, поэтому надо и себе такое «присобачить»:)
    А всё гениальное, да, Анжелика, как всегда просто!!!!
    Спасибо за урок!

    Reply
    • Наталья!
      Скрипт небольшой, но очень эффектный! А в место ссылок и картинок модно поставить что угодно из сайдбара, например, форму подписки. И она не будет «наезжать»)) на остальные блоки, останется при загрузке страницы на своём положенном месте, а при прокручивании сразу привлечёт к себе внимание.

      Reply
  • Анжелика!У Галины давно вижу плавающий сайдбар, с самого момента нашего знакомства.Но себе пока поставить не решусь, ты же знаешь какой я крупный специалист в кодах.Без твоей помощи шагу сделать уже не смогу!

    Reply
    • Ирина, зато теперь есть «плавающая» подписка на обновление сайта! Де уверена, что нужно ставить ещё и сайдбар такой…. , как бы не стало аляписто смотреться.

      Если что, я на связиhttp://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif.

      Reply
  • Здравствуйте, Анжелика. Я честно тоже не совсем сразу поняла о чем идет речь. Тоже в таких вопросах -темный лес. но посмотрела у Галины.
    Спасибо за пояснение и скрипт как это делается.

    Reply
    • Здравствуйте, Ольга!
      Это просто кажется, что сложно. Совсем замудрёные вещи пока стараюсь не публиковать).
      Самое страшное здесь — это вставить свои ссылки на статьи и картинки в нижнем коде. И всё вместе с верхним кодом вставить на сайте в виджет Текст. У вас получится!

      Reply
  • Анжелика, спасибо за скрипт.
    Как-то пользовался другим, но что-то не совсем разобрался с его настройками.
    Ваш скрипт уже протестировал на денвере и теперь буду вживлять на свой блог.
    Еще раз спасибо.

    Reply
  • А я так долго искала как мне сделать плавающий сайдбар использовала различные скрипты но что то не получилось у меня, поэтому пока остановилась на плагине. Знаю, что плагины не очень хорошо, но с ними удобнее. В ближайшее время попробую сделать как вы советуете, может тогда удалю еще один плагин не нужный

    Reply
  • Здравствуйте! Посмотрела пример на сайте Галины и чего-то ничего не поняла 🙁 Для меня это все пока совсем темный лес, только начинаю разбираться. Просветите, пожалуйста, меня, непонятливую! «Плавающий» сайдбар у Галины — это то, что внизу вылезает «рассылка, понравились статьи?» и т.д. или что-то другое имеется в виду? Или это то, что вверху страницы «главная», «об авторе» и т.д. видны, даже если прокручиваешь вниз? Последнее, конечно очень удобно!!

    Reply
    • Здравствуйте, Юлия!
      Сайдбар — это боковая колонка с виджетами.
      При прокручивании блок сайдбара захватывается и фиксируется верхним краем экрана. При прокручивании вверх виджет останавливается на своём месте и дальше вверх уже не «едет».
      У Галины ещё и меню зафиксировано, но это сделано с помощью css, для сайдбара css код не подходит, с ним сайдбар просто фиксируется на экране.

      Reply

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Добавить изображение

http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://delaisaity.ru/script/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif