ГлавнаяДизайн блога › Как сделать Плавающий блок в сайдбаре?


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


как сделать плавающий блок Доброго времени суток всем читателям – 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», что вполне достаточно для моей реализации.

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

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

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




140 комментариевА что думаете Вы?

  1. Константин

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  2. Борис

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

    Но для тизеров самое то...

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Кристина ответил:

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

    [Ответить]

    aloha-family ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Андрей

    Вот это хорошая статья, давно искал такое решение!

    А вот с мобильной версией, ну никак не могу найти...

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Андрей ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  4. Рашида Гарифулина

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  5. Tатьяна Паломи

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Tатьяна Паломи ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Tатьяна Паломи ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    Tатьяна Паломи ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    Tатьяна Паломи ответил:

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

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

    [Ответить]

    Денис Черников ответил:

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

    Tатьяна Паломи ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    Tатьяна Паломи ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    Кристина ответил:

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

    Но ниче, тема у тебя классная, не надо менять, фриланс закажи да и все тут!

    Еще помучаюсь немного и тоже закажу))

    [Ответить]

    Tатьяна Паломи ответил:

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

    Дешевле обойдется работа фрилансера. Я сама об этом уже думаю.

    [Ответить]

  6. Татьяна

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  7. Андрей

    Денис!

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Наталья ответил:

    Спасибо!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста!

    [Ответить]

  8. Николай

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Николай ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Николай ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Андрей

    Денис!

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Андрей ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  10. Gelo

    К сожалению, я не понял как и куда ставить этот скрипт.

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Gelo ответил:

    Денис, спасибо! Я понял ошибку свою.

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

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

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Gelo!

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

    [Ответить]

    Gelo ответил:

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

    [Ответить]

    Денис Черников ответил:

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

  11. Надежда, aka DivaDii

    Денис, а ведь вопрос о месте вставки кода ещё очень много раз Вам будет приходить тут в комментах. Это я Вам гарантирую. ;)

    Потому что комментарии читают далеко не все.

    Проще эту фразу вставить непосредственно в статью:

    «Код скрипта вставить где-нибудь в коде сайдбара».

    Потому что из Вашей статьи это совершенно неочевидно.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Надежда, aka DivaDii ответил:

    Денис, НЕТ, не понятно.

    Возможно, Вы удивитесь. Но код той или иной фиговинки МОЖЕТ располагаться в одном месте. А выводиться — совершенно в другом. Непредсказуемом.

    И раз уж несколько человек переспрашивают, — то это говорит именно о том, что место вставки кода неочевидно.

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

    А вдруг этот код надо вставлять в head'е, или совсем наоборот — в footer'е?..

    Я Вам конкретный совет даю, ЧТО надо уточнить в статье.

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Ольга ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  12. Степан

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  13. Марина Антонова

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  14. Владимир

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  15. Павел

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

    у меня футер высокий и он заезжает на него.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Павел ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Ivanes$ ответил:

    А подскажите, пожалуйста, как именно это сделать?

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

    Денис Черников ответил:

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

    Ivanes$ ответил:

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

    Если появится решение, напишите, пожалуйста, если не трудно, хорошо? И спасибо за этот скрипт, в любом случае. Очень радует своей простотой. Жаль, что не могу его применить из-за этого недочета. :(

    Денис Черников ответил:

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

    Павел ответил:

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

    [Ответить]

    Денис Черников ответил:

    Пока нет!

    aloha-family ответил:

    Тоже пробовал и так и сяк, дописать похожую конструкцию со словом bottom пробовал... но немного заезжает на футтер блок...

    Если кто-то найдет решение — напишите.

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

    Денис Черников ответил:

    Пожалуйста, aloha-family!

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

  16. Митрофан

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  17. Сергей

    Дорогой автор блога! Без этого кода в ХЭДе ничего не работает!)) (Провозился полчаса прежде чем понял в чем причина!)

    $(document).ready (function (){$.autoScroll ({scrollDuration:2000,showDuration:400,hideDuration:300})});

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Сергей ответил:

    вернее код должен быть таким:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  18. Илюха

    Странно вставляю код на страницу а мне пишет вот так примерно и сразу все блоки из сайдбара исчезают:

    Parse error: syntax error, unexpected '}' in /home/z/Pics/site.ru/public_html/wp-content/themes/bv/sidebar.php on line 72

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  19. Илюха

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  20. Игорь

    Спасибо Вам огромное. Уже как месяца три ищу решения. Пытался плагином, но почему-то не работает.

    Ваш скрипт — оптимальное решение в плане, как сделать плавающий блок в сайдбаре.

    Еще раз благодарю!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Игорь ответил:

    Денис, ведь действительно статья очень в тему. Поэтому от меня google+ и твит.

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  21. Елена Голоштенко

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Елена Голоштенко ответил:

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

    И тоже вот на маленьких мониторах реклама наползает на область подвала (пришлось сделать блок с меньшим количеством объявлений). C bottom пробовала, но что-то не выходит.

    [Ответить]

    Денис Черников ответил:

    Рад, что Вы справились!

    На самом деле код можно и в виджет вставить и в любой файл темы оформления отвечающий за определённое пространство на сайте.

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

    [Ответить]

    Ivanes$ ответил:

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

    Денис Черников ответил:

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

  22. Сергей Бондаренко

    Денис, благодарю за код!

    Хотел уточнить, возможно ли добавить ограничение по нижней границе перемещения (чтобы содержимое не наезжало на «футер»)?

    Проблема проявляется, если высота содержимого перемещаемого блока соизмерима с высотой окна браузера. В плагине «Q2W3 Fixed Widget» за это отвечает настройка «Нижний отступ».

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Сергей!

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

    [Ответить]

    Сергей Бондаренко ответил:

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

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  23. prostolinux

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  24. Татьяна

    Денис, нужна подсказка. За что отвечают первая цифра scrollTop ()>1910) и вторая css ({'top':'1568px'

    Никак не могу подогнать значения под себя. Какую мне цифру сейчас нужно уменьшить-увеличить? У меня получился какой-то прыгающий сайдбар вместо плавающего :)

    И еще вопрос. В Хроме, Эксплоуре отображается одинаково, а в Мазиле смещение заметное относительно края. Почему так и как сделать, чтобы во всех браузерах выглядело одинаково?

    [Ответить]

    Денис Черников ответил:

    Татьяна, первая координата отвечает за место появления блока, а вторая по-моему за верхний отступ от окна браузера во время появления!

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

    [Ответить]

  25. Татьяна

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

    [Ответить]

    Денис Черников ответил:

    Нет, Татьяна, Вы не поняли!

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

    Такой статьи у меня нет!

    [Ответить]

  26. Kibosh

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  27. NMitra

    Я сделала тоже самое, только без jQuery

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    NMitra ответил:

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

    <script type='text/javascript' src='http://sozdaiblog.ru/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Ivanes$ ответил:

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Ivanes$ ответил:

    Просто мы с Вами выше уже говорили, что скрипт использует jQuery.

    И я всё жду, что вдруг Вы предложите вариант, ограниченный также и снизу. А тут вдруг оказывается, что, похоже, вряд ли. :(

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

    Денис Черников ответил:

    Уважаемый, Ivanes$! Если Вам так срочно нужно готовое решение, просто попросите любого фрилансера доработать скрипт. За 300-500 рублей Вам это быстренько сделают!

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

    На счёт jQuery, то скрипт использует не ту библиотеку, которую Вы загрузили и привязали,а ту которая уже поставляется с движком. Поэтому практически ни какой дополнительной нагрузки не несёт.

    Читайте учебники по программированию, здесь Вам даром по щелчку не будут исполнять желания! Извините, если сочтёте мой монолог за грубость!

    Ivanes$ ответил:

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

    [Ответить]

  28. NMitra

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

    <script type="text/javascript «src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">

    Это не плохо. Если вы подключили библиотеку, то используйте максимум возможностей. Просто для тех, кто не желает этого делать я предложила вариант на чистом JavaScript

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Ivanes$ ответил:

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

    [Ответить]

  29. NMitra

    Картинку «Принимаю гостевые посты» я бы сделала ссылдкой на какой-нибудь текст с координатами (как минимум email) и озвучиванием минимальных требований к статьям и конечно кнопке «Давай, приятель, не пожалеешь, вот моя статистика, динамика положительная... Блог будет супер крутым и у тебя есть возможность получить с него ссылку».

    Но кто слушает человечка-спамера. Нет его ссылку нужно подтереть. Мало ли к его посещаемости более 3000 человек в сутки прибавится один посетитель с моего блога

    Забавно, я как черепаха Торитилла: «Я была сама такой 300 лет тому назад» :) )) Не обращай внимание, случайно по ссылке с другого блога к тебе попала, больше этого не повториться

    [Ответить]

    Денис Черников ответил:

    Пока, Пока!

    [Ответить]

  30. Ivanes$

    Денис, Вы что, стерли ссылку на код NMitrы?

    Ну знаете. Я подписан на этот пост именно потому, что жду, когда же произойдет развитие кода. И, думаю, не я один далеко. И вот, как только появляется наконец что-то по делу, какой-то прогресс, Вы это удаляете.

    Комментарий-то был по делу, и человек явно грамотный. Почему-то Вашу ссылку на этот пост на isif-life не удаляли, а Вы так по-скупердяйски. :(

    Блин, теперь я был вынужден гуглить ее и лазать по ее блогу в поисках нужного поста, и не нахожу. :( (

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    Ivanes$ ответил:

    Спасибо. Я уже нашел. Но всё равно спасибо.

    Что касается jQuery, то он, зачастую, конечно, «поставляется с движком», как вы выразились, но у Вас, например, подгружается из библиотек Гугла.

    Нагрузка на сервер так действительно даже меньше.

    Но для меня принципиально не это, а исключительно то, что предложенный Вами скрипт не полон, и не годится к применению на сайтах, содержащих какие-либо большие блоки в футере.

    А понукать меня очевидностями про фрилансеров, и про то, что никто не будет бесплатно ничего делать не нужно. Это я и сам знаю, да и блоги совсем не для того ведутся, верно? А как раз чтоб информацию давать.

    Тоже извините, если задел.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

    NMitra ответил:

    Борисовское поколение :) )

    Посмотрите:

    http: //cpaking.ru/

    баблоруба

    оптимизаторшу

    http: //pinzes.ru/ (есть спаленые темы)

    http: //dorian.by/

    Список этот намного больше. Вы можете дать такое качество информации??

    Блог в SEO и дизайне — это не заработок на рекламе, а поиск потенциальных работодателей. Как-то так.

    Для заработка на контекстной рекламе есть авто, женская тематика, стройка. То есть или где дорогие клики, или много народа толпится

    Денис Черников ответил:

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

  31. NMitra

    Эх, Денис, простите за троллинг. За ссылками правда не гонюсь, читатели сами меня находят.

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

    Собственно говоря, jQuery это есть решения на JavaScript. Зачем изобретать велосипед, если JS сейчас предлагает альтернативные варианты.

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  32. Ivanes$

    Как по мне - не проблема, что Денис пишет посты о том, в чем не разбирается - он же все равно этим помогает людям. За что ему искреннее спасибо.

    Проблема в том, что он стыдится этого своего незнания, и пытается его всячески закамуфлировать. Тем более, что никакой не школьник - солидный взрослый дядька.

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

    Ежели бы сразу, как в комментариях возникли первые вопросы, он честно дописал в сам пост:

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

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

    [Ответить]

    Ivanes$ ответил:

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

    [Ответить]

  33. AVDSM

    Спасибо! Всё нормально работает.

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  34. Владислав

    Подскажите решение вопроса.

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

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  35. Артём

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

    Очень помогли! Спасибо!

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  36. Max

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

    [Ответить]

  37. apolo

    Посмотрите как я решил эту проблему. Не размеры страницы и не размеры браузере на блок не имеют влияние.

    В одном сайте их несколько, разных размеров с разными путями «плавания».

    vosmarket.ru

    [Ответить]

  38. Амир

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

    [Ответить]

Оставить комментарий!

Вверх