Sozdaiblog.ru
Назад

Как сделать Плавающий блок в сайдбаре?

Опубликовано: 17.05.2013
Время на чтение: 3 мин
140
0

как сделать плавающий блок Доброго времени суток всем читателям – Sozdaiblog.ru!

В сегодняшнем посте Вы узнаете, как сделать плавающий блок в сайдбаре Вашего сайта.

Для начала мне хотелось бы сказать, что за появление этой публикации нужно поблагодарить одного из посетителей блога, который воспользовавшись разделом «Хочу статью» попросил найти и показать оптимальное решение поставленной задачи.

Такое решение нашлось, и сегодня оно будет доступно всем Вам.

Для чего служат плавающие блоки?

В основном плавающие блоки используют для размещения рекламной информации, которая при прокрутке страницы всегда остаётся в поле зрения читателя.

Конечно, в первую очередь всё зависит от фантазии Веб-мастера. В такой плавающий блок можно запихнуть всё что угодно, будь то реклама, меню навигации или праздничное поздравление. Здесь решать только Вам. Главное не перестарайтесь, так как чересчур яркое оформление плавающего блока будет отвлекать читателей от основного контента. Делайте всё в меру.

Ладно, достаточно болтовни пора переходить к делу.

Итак.

Плавающий блок в сайдбаре.

Чтобы сделать плавающий блок мы не будем использовать какие-либо плагины или огромные простыни кода.

Нам поможет маленький и лёгкий скрипт с минимумом настроек. Вот он, встречайте:


<script>
$(window).scroll(function() {
if ($(this).scrollTop()>1910) $('#scrollable').css({'position':'fixed','top':'0px'});
else $('#scrollable').css({'top':'1568px','position':'static'});
});
</script>

<div id='scrollable' style="width:280px";>

ТУТ ВАШ КОНТЕНТ
</div>

Всё что Вам нужно – это вставить вместо надписи «ТУТ ВАШ КОНТЕНТ», тот блок, который, по Вашему мнению, должен плавать.

Обратите внимание на числовые значения, которые присутствуют в скрипте. Они отвечают за расположение плавающего блока и моментом начала его плавания при скроллинге (прокрутке). Вам потребуется их настроить под свои нужды. В данный момент их значения соответствуют примеру одного из моих блоков, который Вы можете посмотреть в сайдбаре.

Так же внутри тега DIV, которым обёрнут Ваш плавающий блок, Вы можете задавать необходимые CSS стили. На данный момент у меня задана только одна ширина «width:280px», что вполне достаточно для моей реализации.

Если Вы надумаете сделать плавающий сайдбар, то учтите, что его элементы не должны выходить за зону видимости без скроллинга. Иначе, плавать будет только то, что Вы видите изначально, а всё остальное будет скрыто за окном браузера.

На сегодня это всё. Хорошего Вам настроения и до новых статей…

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Константин
    Опубликовано: 16.06.2013 Ответить на сообщение

    Спасибо огромное Денис! Как раз то что надо. Вы как всегда на высоте! Ведь данный скрипт подойдет и для оформления гостевой страницы.

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Пожалуйста, Константин! Думаю, что скрипт подойдёт везде. Единственное разберитесь с позиционированием.

  • Борис
    Опубликовано: 16.06.2013 Ответить на сообщение

    Блин, опять актуальная тема! Да еще так просто решена! Когда-то бился искал решение, хотел Адсенс плавающим сделать... Пока искал, прочитал что рисковано так с Адсенсом...
    Но для тизеров самое то...

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Рад, что Вам понравилось! Мне тоже одно время было это интересно, но руки, как всегда не доходили.

      • Кристина
        Опубликовано: 17.07.2013 Ответить на сообщение

        А чего нельзя? Я хочу именно его и сделать?

        • aloha-family
          Опубликовано: 21.07.2013 Ответить на сообщение

          Почему нельзя адсенс так повесить? Заранее спасибо.

          • Денис Черников
            Опубликовано: 21.07.2013 Ответить на сообщение

            Понятия не имею! Я не пробовал! По идеи можно!

  • Андрей
    Опубликовано: 16.06.2013 Ответить на сообщение

    Вот это хорошая статья, давно искал такое решение!
    А вот с мобильной версией, ну никак не могу найти...

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Пожалуйста, пользуйтесь! А что с мобильной?

      • Андрей
        Опубликовано: 16.06.2013 Ответить на сообщение

        Переписывались с вами насчет мобильной версии сделанной в гугле. Не могу найти, где там можно сделать. Хотя полгода назад пробовал и все гуд...

        • Денис Черников
          Опубликовано: 16.06.2013 Ответить на сообщение

          А ну да, Андрей, извините!

  • Рашида Гарифулина
    Опубликовано: 16.06.2013 Ответить на сообщение

    Интересная идея, видела как-то на одном блоге, думала плагином сделан плавающий блок

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Есть и плагин, но зачем он нужен, когда вот оно — простое решение!

  • Tатьяна Паломи
    Опубликовано: 16.06.2013 Ответить на сообщение

    Денис, но вы прям мои мысли прочитали. Сегодня хотела искать решение установки кода плавающего блока в Гугле. А тут, раз и пришло письмо ко мне на почту с уже готовым ответом. У Вас не блог, а большая энциклопедия ответов!

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Спасибо, Татьяна! Буду мини википедию создавать после таких положительных отзывов!)))

      • Tатьяна Паломи
        Опубликовано: 16.06.2013 Ответить на сообщение

        Денис, я все сделала как написано в статье, но у меня категорически не хочет плавать блок. Не подскажите в чем может быть причина?

        • Денис Черников
          Опубликовано: 16.06.2013 Ответить на сообщение

          Татьяна, попробуйте поменять 'position':'static' на 'position':'absolute'. Если не получится, то у Вас какой-то конфликт с другими скриптами!

          • Tатьяна Паломи
            Опубликовано: 17.06.2013 Ответить на сообщение

            Не, Денис, не хочет у меня работать плавающий блок. Значит какой то конфликт, а ведь такая штучка хорошая, жаль...

          • Денис Черников
            Опубликовано: 17.06.2013 Ответить на сообщение

            Может шаблон у Вас не от вордпресса, а артистером сделан! Попробуйте темы поменять и опробовать!

          • Tатьяна Паломи
            Опубликовано: 17.06.2013 Ответить на сообщение

            Возможно. Тема у меня бесплатная и не понятно делали ее руками или программой.

          • Денис Черников
            Опубликовано: 17.06.2013 Ответить на сообщение

            Татьяна, Вы не расстраивайтесь! Попробуйте протестировать на другой теме!

          • Tатьяна Паломи
            Опубликовано: 17.06.2013 Ответить на сообщение

            Да я бы с удовольствием, только боюсь снести весь блог полностью. Столько за 8 месяцев туда напихала, что уже сама запуталась. Но с темой однозначно нужно что то делать, потому как у вас столько всяких вкусностей на блоге, а к мой теме мало что подходит.
            Денис, хотела у вас спросить. Если взять другую бесплатную тему и в ней постоянно что то менять, она станет уникальной?

          • Денис Черников
            Опубликовано: 17.06.2013 Ответить на сообщение

            В каком смысле уникальной?

          • Tатьяна Паломи
            Опубликовано: 17.06.2013 Ответить на сообщение

            Да вот кричать со всех блогах, что должен быть контент уникальный, картинки уникальные, тема (шаблон) уникальный. Вот и хотела спросить, если в теме постоянно что то меняю, будет она уникальной или нет?

          • Денис Черников
            Опубликовано: 17.06.2013 Ответить на сообщение

            Татьяна, не слушайте Вы всякие бредни! Поисковые системы не оценивают Ваш шаблон по уникальности. Они только видят код, который должен соответствовать стандартам разметки и не иметь ошибок. Всё остальное бред. Поисковые роботы ещё не научились сканировать изображения на картинках им интересен только ALT, больше они ничего не видят. Они слепы.

          • Tатьяна Паломи
            Опубликовано: 18.06.2013 Ответить на сообщение

            Сегодня слепы, а завтра у них может проснуться дар ясновидения. Прогресс то идет вперед. Но как говориться что будет завтра, то и решать будем завтра. Насчет «уникальности» немного меня успокоили, спасибо вам Денис. А с шаблоном буду думать что делать, уж много разных фишек есть, а у меня они не работают(((

          • Денис Черников
            Опубликовано: 18.06.2013 Ответить на сообщение

            Пожалуйста, Татьяна! Думаю, такого не случится, что у роботов появятся глаза!)))

          • Кристина
            Опубликовано: 17.07.2013 Ответить на сообщение

            Татьяна, привет! Я вот тоже бьюсь над этой темой! Куда я только коды всякие не вставляла, ничего не получается, и этот тоже не работает((
            Но ниче, тема у тебя классная, не надо менять, фриланс закажи да и все тут!
            Еще помучаюсь немного и тоже закажу))

          • Tатьяна Паломи
            Опубликовано: 17.07.2013 Ответить на сообщение

            Привет Кристина. Тема не очень то у меня и классная, раз многое в ней не настраивается. А если поставить новую тему, но в ней столько всего менять нужно опять, ужас.
            Дешевле обойдется работа фрилансера. Я сама об этом уже думаю.

  • Татьяна
    Опубликовано: 16.06.2013 Ответить на сообщение

    Классно, Денис! Мне надо Мне на самом деле много чего надо, что я у вас нахожу. Так что спасибо!

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Пожалуйста, Татьяна! Рад, что у меня находится то, что Вам необходимо!

  • Андрей
    Опубликовано: 16.06.2013 Ответить на сообщение

    Денис!
    Растерялся: куда вставлять скрипт?

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      В сайдбар конечно! Где необходим плавающий блок, туда и ставить!

      • Наталья
        Опубликовано: 21.03.2014 Ответить на сообщение

        Спасибо!

        • Денис Черников
          Опубликовано: 23.03.2014 Ответить на сообщение

          Пожалуйста!

  • Николай
    Опубликовано: 16.06.2013 Ответить на сообщение

    Здравствуйте! И как можно взять код?

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Здравствуйте! Берёте и копируете!

      • Николай
        Опубликовано: 16.06.2013 Ответить на сообщение

        не копируется

        • Денис Черников
          Опубликовано: 16.06.2013 Ответить на сообщение

          Всё там копируется!

          • Николай
            Опубликовано: 16.06.2013 Ответить на сообщение

            Не копируется код. спрашивает разрешение. где его взять?

          • Денис Черников
            Опубликовано: 17.06.2013 Ответить на сообщение

            Нажимаете «OK» и всё копируется!

  • Андрей
    Опубликовано: 16.06.2013 Ответить на сообщение

    Денис!
    Так куда ставить скрипт? Чего-то я запутался...

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Я же ответил, В САЙДБАР!

      • Андрей
        Опубликовано: 16.06.2013 Ответить на сообщение

        Не видел вашего комента и своего, потому задал повторно вопрос...

        • Денис Черников
          Опубликовано: 16.06.2013 Ответить на сообщение

          Ничего, бывает! Главное, что бы у Вас всё получилось!

  • Gelo
    Опубликовано: 16.06.2013 Ответить на сообщение

    К сожалению, я не понял как и куда ставить этот скрипт.
    Поставил у себя через виджеты в сайдбар с правой стороны, баннер отобразился сам, а сам принцип не работает. Если можно Денис, ещё более подбробней напишите.

    • Денис Черников
      Опубликовано: 16.06.2013 Ответить на сообщение

      Подробней уже некуда! Нужно не из админки виджеты вставлять, а в файле сайдбара, который находится в теме оформления Вашего сайта!

      • Gelo
        Опубликовано: 23.06.2013 Ответить на сообщение

        Денис, спасибо! Я понял ошибку свою.
        Но всё же вопрос остаётся открытым у меня и других людей по комментариям — куда ставить скрипт? В теме понятно, выбираешь тот сайдбар куда нужно поставить, а куда??? в начало, в конец, в середину, после каких может быть комбинаций слов...
        Не все профи и понимают с полпинка что почём. А вы упорна не хотите написать подробно. Для людей же делаете статью, и люди просят, но у вы ответа никто не получил ещё. Только не раздражайтесь, просто по Вам видно (по Вашим ответам). Буду рад услышать развёрнутый ответ. БлагоДарю!

        • Денис Черников
          Опубликовано: 23.06.2013 Ответить на сообщение

          Пожалуйста, Gelo!
          Прнимаете, я не могу написать куда конкретно в сайдбаре Вам необходимо вставить скрипт. Темы оформления у всех разные и место для отображения блока выбирает каждый сам для себя. Всё постигается только опытным путём. Я не раздражаюсь, просто некоторые не понимают о чём спрашивают! Вы вот сами подумайте, как я Вам поясню куда вставить скрипт, если Вы к примеру хотите его установить под формой подписки, а другой под виджетом категорий, а третий под каким-нибудь рекламным блоком. Поэтому, как я Вам это объясню!

          • Gelo
            Опубликовано: 24.06.2013 Ответить на сообщение

            Понял, Денис. Буду эксперементировать. А перед этим сделаю Бэкап сайта ))), на всякий случай. Думаю получится всё у меня. Вам тоже удачи!

          • Денис Черников
            Опубликовано: 24.06.2013 Ответить на сообщение

            Спасибо, спрашивайте если что-то не понятно будет!

  • Надежда aka DivaDii
    Опубликовано: 17.06.2013 Ответить на сообщение

    Денис, а ведь вопрос о месте вставки кода ещё очень много раз Вам будет приходить тут в комментах. Это я Вам гарантирую.
    Потому что комментарии читают далеко не все.
    Проще эту фразу вставить непосредственно в статью:
    «Код скрипта вставить где-нибудь в коде сайдбара».
    Потому что из Вашей статьи это совершенно неочевидно.

    • Денис Черников
      Опубликовано: 17.06.2013 Ответить на сообщение

      Скажите, Надежда, а из названия поста — это тоже не понятно?

      • Надежда aka DivaDii
        Опубликовано: 17.06.2013 Ответить на сообщение

        Денис, НЕТ, не понятно.
        Возможно, Вы удивитесь. Но код той или иной фиговинки МОЖЕТ располагаться в одном месте. А выводиться — совершенно в другом. Непредсказуемом.
        И раз уж несколько человек переспрашивают, — то это говорит именно о том, что место вставки кода неочевидно.
        Из названия поста понятно, что некое содержимое будет выводиться в плавающем блоке в сайдбаре.
        А вдруг этот код надо вставлять в head'е, или совсем наоборот — в footer'е?..
        Я Вам конкретный совет даю, ЧТО надо уточнить в статье.
        Потому что человеку, чтобы узнать, приходится либо читать комменты, либо (проскочив кучу комментариев) доставать Вас этим простым типичным вопросом, который остался не освещен в статье.

        • Денис Черников
          Опубликовано: 17.06.2013 Ответить на сообщение

          Если бы всё было бы так сложно, как Вы описываете в Вашем комментарии, то наверное я написал бы об этом в посте и уточнил, где в head'е вставить, а где в footer'е. Раз в посте нет уточнения, значит очевидно, что кроме сайдбара больше ничего не имеется ввиду. Или Вы думаете я совсем ку-ку, не понимаю, что пишу и для кого! Речь идёт в посте о сайдбаре, значит и вставляется он в сайдбар!!! Вы не стройте ненужных предположений, а выполняйте всё чётко по инструкции и будет Вам счастье!

          • Ольга
            Опубликовано: 17.06.2013 Ответить на сообщение

            Просто не все так хорошо в скриптах и кодах разбираются, как Вы,Денис. Для меня это вообще темной лес, я только с помощью видеоурока бы справилась или пошагового фото.

          • Денис Черников
            Опубликовано: 17.06.2013 Ответить на сообщение

            Так я и стараюсь пошагово разбирать каждое действие! Но тут действительно ничего сложного нет, бери любой контент и вставляй в середину кода, а код в сайдбар И ВСЁ! Вас же не заставляют код с ноля писать. Ну а если вообще беда, то можно и спросить у автора, да и комментарии можно не полениться почитать. А то вон некоторым за кого Вы вступились даже лень комменты почитать. Мало того, что всё выложили и разжевали, осталось только в гости придти и всё за них сделать. Всё равно не довольны. Да ну и ладно!

  • Степан
    Опубликовано: 17.06.2013 Ответить на сообщение

    Добрый день Денис.Встречал тоже на сайтах плавающий виджет.У Вас как обычно сделано хорошо и просто.Испытания прошли на тестовом блоге,всё работает.Спасибо.Денис я давно хотел задать Вам вопрос,Вы классно пишите html-коды,а почему нет платных видео-уроков,или задумка есть?

    • Денис Черников
      Опубликовано: 17.06.2013 Ответить на сообщение

      Привет, Степан! Я сам редко пишу коды, в основном я их заимствую у более опытных программистов и адаптирую под себя и под Вас!

  • Марина Антонова
    Опубликовано: 17.06.2013 Ответить на сообщение

    Благодарю! Как всегда полезная статья. Все, что касается установки без плагинов нахожу у вас, Денис.

    • Денис Черников
      Опубликовано: 17.06.2013 Ответить на сообщение

      Пожалуйста, Марина! Не любитель я этих плагинов, когда есть простой кодик!

  • Владимир
    Опубликовано: 19.06.2013 Ответить на сообщение

    Привет, Денис! Всё как всегда классно у тебя на сайте. И этот пост не исключение. Еще бы примерчик такого плавающего блока разместил,вообще бы было здорово!

    • Денис Черников
      Опубликовано: 19.06.2013 Ответить на сообщение

      Здравствуйте, Владимир! Спасибо, за Ваши добрые слова! Примерчик у меня в сайдбаре есть (плавающий баннер).

  • Павел
    Опубликовано: 21.06.2013 Ответить на сообщение

    Лучшее решении плавающего блока, только, Денис, помогите решить вопрос: как его остановить перед футером?
    у меня футер высокий и он заезжает на него.

    • Денис Черников
      Опубликовано: 21.06.2013 Ответить на сообщение

      Попробуйте задать нижний отступ блоку от окна браузера (типа того, который от верха отступает! По идее должно прокатить!

      • Павел
        Опубликовано: 21.06.2013 Ответить на сообщение

        Даже не представляю куда и как воткнуть. Можете подсказать в какое место и как задать отступ?

        • Денис Черников
          Опубликовано: 21.06.2013 Ответить на сообщение

          Стили пропишите или в скрипте или в дивах!

          • Ivanes
            Опубликовано: 22.07.2013 Ответить на сообщение

            А подскажите, пожалуйста, как именно это сделать?
            Мне кажется, должно быть условие, чтобы блок переставал фиксироваться при достижении определенного расстояния до нижней границы экрана (высота футера), так же, как это сделано для верхней. Только я не владею синтаксисом и не знаю, как конкретно это написать.

          • Денис Черников
            Опубликовано: 22.07.2013 Ответить на сообщение

            Попробуйте дописать в скрипте похожую конструкцию, но вместо top, поработать со значением bottom. Просто готового решения у меня пока нет.

          • Ivanes
            Опубликовано: 22.07.2013 Ответить на сообщение

            Да я вот и пытался добавить дополнительное условие, вроде scrollBottom ()<300, или что-то подобное. Но не знаю ни как указать в условии логическое "и", ни даже как вложенные условия сделать. Вы тоже не владеете jQuery?
            Если появится решение, напишите, пожалуйста, если не трудно, хорошо? И спасибо за этот скрипт, в любом случае. Очень радует своей простотой. Жаль, что не могу его применить из-за этого недочета.

          • Денис Черников
            Опубликовано: 22.07.2013 Ответить на сообщение

            С jQuery мы потихоньку сближаемся, но постигается всё не так то просто. Несколько ошибок и у Вас всё должно получится. Если решение появится я дам знать (в посте допишу).

          • Павел
            Опубликовано: 21.06.2013 Ответить на сообщение

            Если паддинг и margin то они не срабытывают. Может есть еще какие то варианты то буду признателен. Я не очень еще в css/

          • Денис Черников
            Опубликовано: 21.06.2013 Ответить на сообщение

            Пока нет!

          • aloha-family
            Опубликовано: 27.07.2013 Ответить на сообщение

            Тоже пробовал и так и сяк, дописать похожую конструкцию со словом bottom пробовал... но немного заезжает на футтер блок...
            Если кто-то найдет решение — напишите.
            п.с. всем спасибо, а комментарии некоторые почитал — так люди вообще гонят. Читать лень, разбираться лень, но «объясните». Я вот тоже плохо разбираюсь, в программировании ноль, но надо же понимать, что если ты сам ноль в чем-то, то как тебе объяснят на пальцах — это довольно сложно. Спасибо автору блога!

          • Денис Черников
            Опубликовано: 27.07.2013 Ответить на сообщение

            Пожалуйста, aloha-family!
            Вы всё правильно подметили! Если найдётся решение я его допишу в этом посте!

  • Митрофан
    Опубликовано: 11.07.2013 Ответить на сообщение

    Добрый день, День Денис. Очень полезная статья. А не подскажите, куда именно нужно данный код вставить? А то что-то не понятно!

    • Денис Черников
      Опубликовано: 11.07.2013 Ответить на сообщение

      Здравствуйте, Митрофан! Если Вы устанавливаете плавающий блок в сайдбаре, а его оборачиваете этим кодом, то соответственно и код вставлять в сайдбар! Почитайте предыдущие комменты!

  • Сергей
    Опубликовано: 11.07.2013 Ответить на сообщение

    Дорогой автор блога! Без этого кода в ХЭДе ничего не работает!)) (Провозился полчаса прежде чем понял в чем причина!)
    $(document).ready (function (){$.autoScroll ({scrollDuration:2000,showDuration:400,hideDuration:300})});

    • Денис Черников
      Опубликовано: 11.07.2013 Ответить на сообщение

      Здравствуйте, Сергей! У меня работает без кода в «хэде».

      • Сергей
        Опубликовано: 11.07.2013 Ответить на сообщение

        вернее код должен быть таким:
        Без него не будет работать, если удалить в хэде — проверить легко))

        • Денис Черников
          Опубликовано: 11.07.2013 Ответить на сообщение

          Сергей, у меня всё работает! Чтобы сработал скрипт его не обязательно в хэдере подключать.

  • Илюха
    Опубликовано: 20.07.2013 Ответить на сообщение

    Странно вставляю код на страницу а мне пишет вот так примерно и сразу все блоки из сайдбара исчезают:
    Parse error: syntax error, unexpected '}' in /home/z/Pics/site.ru/public_html/wp-content/themes/bv/sidebar.php on line 72

    • Денис Черников
      Опубликовано: 20.07.2013 Ответить на сообщение

      Смотрите внимательней, возможно Вы пропустили какой-нибудь символ или кодировку не соблюдаете. Возможно, что не туда вставляете.

  • Илюха
    Опубликовано: 21.07.2013 Ответить на сообщение

    Да нет в том то и дело что все на месте.

    • Денис Черников
      Опубликовано: 21.07.2013 Ответить на сообщение

      Возможно, что какие-то переменные конфликтуют. Нужно всё смотреть и пробовать разные варианты, анализировать и т.д.

  • Игорь
    Опубликовано: 22.07.2013 Ответить на сообщение

    Спасибо Вам огромное. Уже как месяца три ищу решения. Пытался плагином, но почему-то не работает.
    Ваш скрипт — оптимальное решение в плане, как сделать плавающий блок в сайдбаре.
    Еще раз благодарю!

    • Денис Черников
      Опубликовано: 22.07.2013 Ответить на сообщение

      Пожалуйста, Игорь! Рад, что у Вас всё получилось, а то у многих почему-то не срабатывает!

      • Игорь
        Опубликовано: 22.07.2013 Ответить на сообщение

        Денис, ведь действительно статья очень в тему. Поэтому от меня google+ и твит.
        Просмотрел карту сайта, нашел много чего интересного, чего не знал. Займусь скоро чтением Вашего блога. Подписался на обновления!

        • Денис Черников
          Опубликовано: 22.07.2013 Ответить на сообщение

          Смотрите, материала много!

  • Елена Голоштенко
    Опубликовано: 22.07.2013 Ответить на сообщение

    Денис, спасибо за скрипт! Только пару дней назад подумала о том, что надо бы мне тоже плавающий рекламный блок сделать, и вот Ваша статья! Уже опробовала скрипт, в принципе все работает, только надо со стилями немного поковыряться. Пробовала на РСЯ, так вот там когда плавает, остается только текст, а характерное оформление сайдбара исчезает почему-то.

    • Денис Черников
      Опубликовано: 22.07.2013 Ответить на сообщение

      Пожалуйста, Елена! Нужно смотреть, я так не могу Вам ответить!

      • Елена Голоштенко
        Опубликовано: 29.08.2013 Ответить на сообщение

        Ух, добила сегодня стили вставляемого блока рекламы. На первый взгляд все работает. Спасибо! Я вот только так и не поняла: тут в комментариях написано, что код вставлять надо не в виджет в админке, а куда-то в файл шаблона. А я все в текстовый виджет вставила (ибо куда еще — не врубаюсь, файл сайдбара переставал работать после моих манипуляций), стили правда, прописала отдельно. Или это все-таки не правильно?
        И тоже вот на маленьких мониторах реклама наползает на область подвала (пришлось сделать блок с меньшим количеством объявлений). C bottom пробовала, но что-то не выходит.

        • Денис Черников
          Опубликовано: 29.08.2013 Ответить на сообщение

          Рад, что Вы справились!
          На самом деле код можно и в виджет вставить и в любой файл темы оформления отвечающий за определённое пространство на сайте.
          На счёт наезда на подвал, то Вы уже не первый человек кто столкнулся с этой проблемой. Извините, ни как не дойдут руки для решения данной проблемы. Но она обязательно решится.

          • Ivanes
            Опубликовано: 29.08.2013 Ответить на сообщение

            Денис, мы очень на Вас надеемся, ждем и не забыли, вот кроме шуток.

          • Денис Черников
            Опубликовано: 29.08.2013 Ответить на сообщение

            Теперь мне не отвертеться!)))

  • Сергей Бондаренко
    Опубликовано: 26.07.2013 Ответить на сообщение

    Денис, благодарю за код!
    Хотел уточнить, возможно ли добавить ограничение по нижней границе перемещения (чтобы содержимое не наезжало на «футер»)?
    Проблема проявляется, если высота содержимого перемещаемого блока соизмерима с высотой окна браузера. В плагине «Q2W3 Fixed Widget» за это отвечает настройка «Нижний отступ».

    • Денис Черников
      Опубликовано: 26.07.2013 Ответить на сообщение

      Пожалуйста, Сергей!
      На этот вопрос я уже отвечал в предыдущих комментариях. Посмотрите их!

      • Сергей Бондаренко
        Опубликовано: 27.07.2013 Ответить на сообщение

        Денис, прошу простить за невнимательность, но чтение комментариев остановили фразы «куда вставлять скрипт», «не копируется» и т.д. =)
        Конечно, перед тем как задать вопрос, пробовал сам допилить код — не вышло. Если будет время покопаться и что-нибудь получится, обязательно отпишусь здесь.

        • Денис Черников
          Опубликовано: 27.07.2013 Ответить на сообщение

          Вам не за что извиняться, Сергей! Просто прежде чем делать выводы нужно самому попробовать, а уже потом прийти к какому-то умозаключению. Если всё же каменный цветок получится обязательно отпишитесь!

  • prostolinux
    Опубликовано: 28.07.2013 Ответить на сообщение

    Спасибо, давно хотел такой себе, да только плагин не работал, а другое решение было слишком сложно, было лень. А тут раз и всё!

    • Денис Черников
      Опубликовано: 28.07.2013 Ответить на сообщение

      Пожалуйста! У меня давно этот код стоит!

  • Татьяна
    Опубликовано: 17.08.2013 Ответить на сообщение

    Денис, нужна подсказка. За что отвечают первая цифра scrollTop ()>1910) и вторая css ({'top':'1568px'
    Никак не могу подогнать значения под себя. Какую мне цифру сейчас нужно уменьшить-увеличить? У меня получился какой-то прыгающий сайдбар вместо плавающего
    И еще вопрос. В Хроме, Эксплоуре отображается одинаково, а в Мазиле смещение заметное относительно края. Почему так и как сделать, чтобы во всех браузерах выглядело одинаково?

    • Денис Черников
      Опубликовано: 17.08.2013 Ответить на сообщение

      Татьяна, первая координата отвечает за место появления блока, а вторая по-моему за верхний отступ от окна браузера во время появления!
      На счёт отображения в разных браузерах, то это нужно кроссбраузерность настраивать, чтобы подогнать под известные браузеры. У меня, кстати, нормально везде отображается. Возможно у Вас из=за шаблона такое происходит!

  • Татьяна
    Опубликовано: 17.08.2013 Ответить на сообщение

    Нужно шаблон настраивать на кроссбраузерность, правильно я поняла? Денис, а у вас нет такой статьи

    • Денис Черников
      Опубликовано: 17.08.2013 Ответить на сообщение

      Нет, Татьяна, Вы не поняли!
      Нужно адаптировать скрипт под каждый браузер учитывая особенности шаблона.
      Такой статьи у меня нет!

  • Kibosh
    Опубликовано: 04.09.2013 Ответить на сообщение

    Вот это тема! Прям «то что доктор прописал»! Буду пробовать на своей странице. Спасибо Денис!

    • Денис Черников
      Опубликовано: 04.09.2013 Ответить на сообщение

      Пожалуйста! Если что, спрашивайте!

  • NMitra
    Опубликовано: 05.09.2013 Ответить на сообщение

    Я сделала тоже самое, только без jQuery
    По этому исследованию не так он (jQuery) уж и скор http: //glowfilter.com/blog/javascript-performance-testing-innerhtml-vs-appendchild/

    • Денис Черников
      Опубликовано: 05.09.2013 Ответить на сообщение

      А где Вы увидели jQuery?

      • NMitra
        Опубликовано: 05.09.2013 Ответить на сообщение

        Уберите из шаблона

        И ваш скрипт перестанет работать )

        • Денис Черников
          Опубликовано: 05.09.2013 Ответить на сообщение

          Так на этом скрипте пол движка завязано и он ни коим образом не увеличивает нагрузку!

          • Ivanes
            Опубликовано: 05.09.2013 Ответить на сообщение

            Ну здрасте, а что же там, по-Вашему?

          • Денис Черников
            Опубликовано: 05.09.2013 Ответить на сообщение

            Я просто не то понял! А Вы тут при чём?

          • Ivanes
            Опубликовано: 05.09.2013 Ответить на сообщение

            Просто мы с Вами выше уже говорили, что скрипт использует jQuery.
            И я всё жду, что вдруг Вы предложите вариант, ограниченный также и снизу. А тут вдруг оказывается, что, похоже, вряд ли.
            Скажите, где же Вы взяли этот код? Мне очень уже хочется самому туда пойти и попросить их дополнить его ограничением снизу. И тут опубликовать.

          • Денис Черников
            Опубликовано: 05.09.2013 Ответить на сообщение

            Уважаемый, Ivanes$! Если Вам так срочно нужно готовое решение, просто попросите любого фрилансера доработать скрипт. За 300-500 рублей Вам это быстренько сделают!
            На счёт варианта NMitra, то я просто нечаянно удалил её ссылку (хотел сделать неактивной но, блин не на ту кнопку нажал). Скрипт был взят на сайте зарубежного разработчика, который бесплатно Вам не будет его дорабатывать.
            На счёт jQuery, то скрипт использует не ту библиотеку, которую Вы загрузили и привязали,а ту которая уже поставляется с движком. Поэтому практически ни какой дополнительной нагрузки не несёт.
            Читайте учебники по программированию, здесь Вам даром по щелчку не будут исполнять желания! Извините, если сочтёте мой монолог за грубость!

          • Ivanes
            Опубликовано: 05.09.2013 Ответить на сообщение

            NMitra, а как Вы сделали?

  • NMitra
    Опубликовано: 05.09.2013 Ответить на сообщение

    У вас почему-то аж два раза, если не больше

    • Денис Черников
      Опубликовано: 05.09.2013 Ответить на сообщение

      Мне так нравится!)))

      • Ivanes
        Опубликовано: 05.09.2013 Ответить на сообщение

        NMitra, а где, где он, Ваш вариант?

  • NMitra
    Опубликовано: 05.09.2013 Ответить на сообщение

    Картинку «Принимаю гостевые посты» я бы сделала ссылдкой на какой-нибудь текст с координатами (как минимум email) и озвучиванием минимальных требований к статьям и конечно кнопке «Давай, приятель, не пожалеешь, вот моя статистика, динамика положительная... Блог будет супер крутым и у тебя есть возможность получить с него ссылку».
    Но кто слушает человечка-спамера. Нет его ссылку нужно подтереть. Мало ли к его посещаемости более 3000 человек в сутки прибавится один посетитель с моего блога
    Забавно, я как черепаха Торитилла: «Я была сама такой 300 лет тому назад» )) Не обращай внимание, случайно по ссылке с другого блога к тебе попала, больше этого не повториться

    • Денис Черников
      Опубликовано: 05.09.2013 Ответить на сообщение

      Пока, Пока!

  • Ivanes
    Опубликовано: 05.09.2013 Ответить на сообщение

    Денис, Вы что, стерли ссылку на код NMitrы?
    Ну знаете. Я подписан на этот пост именно потому, что жду, когда же произойдет развитие кода. И, думаю, не я один далеко. И вот, как только появляется наконец что-то по делу, какой-то прогресс, Вы это удаляете.
    Комментарий-то был по делу, и человек явно грамотный. Почему-то Вашу ссылку на этот пост на isif-life не удаляли, а Вы так по-скупердяйски.
    Блин, теперь я был вынужден гуглить ее и лазать по ее блогу в поисках нужного поста, и не нахожу. (

    • Денис Черников
      Опубликовано: 05.09.2013 Ответить на сообщение

      Спасибо, за добрые слова, Вы тоже очень хороший человек и вовремя читаете все комментарии!!! Вот Ваша ссылка — http: //shpargalkablog.ru/2013/07/advertising-yandex.html

      • Ivanes
        Опубликовано: 05.09.2013 Ответить на сообщение

        Спасибо. Я уже нашел. Но всё равно спасибо.
        Что касается jQuery, то он, зачастую, конечно, «поставляется с движком», как вы выразились, но у Вас, например, подгружается из библиотек Гугла.
        Нагрузка на сервер так действительно даже меньше.
        Но для меня принципиально не это, а исключительно то, что предложенный Вами скрипт не полон, и не годится к применению на сайтах, содержащих какие-либо большие блоки в футере.
        А понукать меня очевидностями про фрилансеров, и про то, что никто не будет бесплатно ничего делать не нужно. Это я и сам знаю, да и блоги совсем не для того ведутся, верно? А как раз чтоб информацию давать.
        Тоже извините, если задел.

        • Денис Черников
          Опубликовано: 05.09.2013 Ответить на сообщение

          Пожалуйста! На счёт ведения блогов — не верно! Многие ведут блоги, чтобы давать информацию частично, а за полную нужно платить!

          • NMitra
            Опубликовано: 05.09.2013 Ответить на сообщение

            Борисовское поколение )
            Посмотрите:
            http: //cpaking.ru/
            баблоруба
            оптимизаторшу
            http: //pinzes.ru/ (есть спаленые темы)
            http: //dorian.by/
            Список этот намного больше. Вы можете дать такое качество информации??
            Блог в SEO и дизайне — это не заработок на рекламе, а поиск потенциальных работодателей. Как-то так.
            Для заработка на контекстной рекламе есть авто, женская тематика, стройка. То есть или где дорогие клики, или много народа толпится

          • Денис Черников
            Опубликовано: 05.09.2013 Ответить на сообщение

            Спасибо, что ещё раз напомнили мне давно забытое! И кстати, одно другому не мешает!

  • NMitra
    Опубликовано: 05.09.2013 Ответить на сообщение

    Эх, Денис, простите за троллинг. За ссылками правда не гонюсь, читатели сами меня находят.
    jQuery можно на любой сайт поставить. Библиотека кэшируется. Её используют на многих сайтах. Стоит человеку зайти на какой-нибудь сайт и он запоминает весь код в браузере, то есть браузеру не нужно его читать повторно. Просто по моим наблюдениям сейчас наблюдается спад её использования. А это значит человек зайдя к вам на сайт должен будет прочесть библиотеку, прежде чем загрузить страницу, а это не есть гуд.
    Собственно говоря, jQuery это есть решения на JavaScript. Зачем изобретать велосипед, если JS сейчас предлагает альтернативные варианты.

    • Денис Черников
      Опубликовано: 05.09.2013 Ответить на сообщение

      Всё решается элементарно, скрипт jQuery подгружается после основного контента и CSS. У меня по-моему даже где-то это описано было или хак я применял, сейчас не помню.

  • Ivanes
    Опубликовано: 07.09.2013 Ответить на сообщение

    Как по мне - не проблема, что Денис пишет посты о том, в чем не разбирается - он же все равно этим помогает людям. За что ему искреннее спасибо.
    Проблема в том, что он стыдится этого своего незнания, и пытается его всячески закамуфлировать. Тем более, что никакой не школьник - солидный взрослый дядька.
    В блоггинге нет никакого смысла прикидываться тем, кем не являешься. Менее компетентным людям, чем автор, нет никакого дела, насколько он знающий, а более компетентные всё равно сразу всё поймут.
    Ежели бы сразу, как в комментариях возникли первые вопросы, он честно дописал в сам пост:
    «Друзья, код этот я взял с зарубежного сайта, сам в нем ничего не понимаю, но у читателей возникают с ним такие-то затруднения, буду благодарен, если поможете!..»
    — то, уверен, очень быстро нашлись бы забредшие на блог программисты, которые бы все объяснили и написали бы ему уйму возможных вариантов, которые Денис смог бы добавить в пост, отчего и пост, и блог в целом только выиграли по популярности, посещаемости и уровню доверия.

    • Ivanes
      Опубликовано: 07.09.2013 Ответить на сообщение

      Причем, совершенно БЕСПЛАТНО бы это сделали. =))

  • AVDSM
    Опубликовано: 24.09.2013 Ответить на сообщение

    Спасибо! Всё нормально работает.
    А как не будь можно остановить блок в конце прокрутки, чтобы оно не закрывала «ФУТТЕР» сайта?

    • Денис Черников
      Опубликовано: 24.09.2013 Ответить на сообщение

      Пожалуйста! Пока ещё не доработали.

  • Владислав
    Опубликовано: 06.11.2013 Ответить на сообщение

    Подскажите решение вопроса.
    У меня конструкция сайта в CMS обуславливает, что сайдбар растянут не до низа страницы, а только до определенной её части (2809px от верха страницы — нижняя черта сайдбара).
    При высоте плавающего блока 300 px как задать, чтобы он остановился в нужном моменте и не наезжал на контент, который расположен ниже, т.е. чтобы тело блока осталось внизу этого сайдбара, который ушел из зоны видимости при скролле страницы вниз

    • Денис Черников
      Опубликовано: 06.11.2013 Ответить на сообщение

      Пока решения нет, нужно индивидуально подходить к каждому шаблону. Как вариант уменьшите размер плавающего блока!

  • Артём
    Опубликовано: 07.12.2013 Ответить на сообщение

    Отличный пост! Легковесное решение плавающего блока. Минимум усилий и все работает.
    Очень помогли! Спасибо!

    • Денис Черников
      Опубликовано: 07.12.2013 Ответить на сообщение

      Пожалуйста! Рад что Вам понравилось и Вы остались довольны! Заходите ещё!

  • Max
    Опубликовано: 05.03.2014 Ответить на сообщение

    На экране 800px при смещении страницы направо этот скользящий блок на сайте вылетает за пределы страницы. Как только блок смещается вниз он уже привязан к правому краю экрана, а сайт сдвигается влево... Под него надо relative контейнер ставить, иначе никак.

  • apolo
    Опубликовано: 05.03.2014 Ответить на сообщение

    Посмотрите как я решил эту проблему. Не размеры страницы и не размеры браузере на блок не имеют влияние.
    В одном сайте их несколько, разных размеров с разными путями «плавания».
    vosmarket.ru

  • Амир
    Опубликовано: 15.04.2017 Ответить на сообщение

    К сожалению, не работает. Вставил код перед закрывающим body и при обновлении страницы видно только добавленный контент, отнюдь не плавающий

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.