Как сделать плавающую панель с социальными кнопками для сайта (Html, Css, jQuery)

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

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

Но размещать данную панель луче всегда под рукой, так чтобы ее не пришлось искать, но в то же время, чтобы она не была особо навязчивой. На своем предыдущем сайте (SinFx.narod.ru) я выбрал для такого размещения правый нижний угол экрана.

Исполнение:

Для размещения социальных кнопок я выбрал панель с position: absolute, а не fixed и передвигаю ее скриптом именно потому, что на фиксированной панели у некоторых родных кнопок социальных сетей не корректно отображаются всплывающие окна. Например эта проблема есть у кноок от vk.

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

Html код:

Данный код лучше разместить перед закрывающим тегом </body> дабы панель всегда была поверх всех элементов страницы, это если вы не используете z-index. Саму панель необходимо будет настроить под ваши потребности.

<div id="like_panel">
   Пример панельки с лайками
</div>

Css style:

Элементарный Сss для минимальной настройки панели.

<style type="text/css">
    body {
        height: 3000px;
    }

    #like_panel {
        position: absolute;
        bottom: 10px;
        right: 20px;
        width: 300px;
        height: 20px;
        padding: 4px;
        background: #ffd800;
        text-align: center;
    }
</style>

JavaScript:

Собственно сам jQuery JavaScript который будет передвигать всю эту конструкцию по экрану в случае прокрутки или изменения размера окна браузера.

<script>
    $(window).resize(function () {
        $("#like_panel").css('bottom', 10 - $(window).scrollTop() + 'px');
    });

    $(window).scroll(function () {
        if ($("#like_panel").css("opacity") > 0) {
            $("#like_panel").stop(true).fadeTo(100, 0).animate({ bottom: 10 - $(window).scrollTop() }, 250).fadeTo(300, 1);
        } else {
            $("#like_panel").stop(true).animate({ bottom: 10 - $(window).scrollTop() }, 250).fadeTo(300, 1);
        }
    });
</script>

Архив с примером:

Если вам что-то не понятно, то можете скачать архив с рабочим примером и разобрать его более подробно.

Скачать пример плавающей панели с социальными кнопками
(Прямая ссылка, RAR архив)

Вместе с этой статьей читают: