/ Дизайн / Плавающий боковой блок

Плавающий боковой блок

HIT

24.03.2016

1894

Иногда бывает нужно чтобы какой-либо боковой блок пролистывался вместе с основным контентом. При этом, этот блок будет будет следовать с небольшой задержкой привлекая дополнительно внимание.
Ставим его перед выводом основного блока (div id=»content»)

<div id="share-pannel">

CSS блока

#share-pannel {
    padding: 5px;
    position: absolute;
    left: -45px;
    top: 100px;
    width: 35px;
    background-color: rgba(17,17,17,0.8);
    border-radius: 3px 0 0 3px;
    color: #fff;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

Скрипт

// Зафиксированный боковой блок

$(function() {
var offset = $("#share-pannel").offset();
var topPadding = 15;
$(window).scroll(function() {

if ($(window).scrollTop() > offset.top) {
$("#share-pannel").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding

});
} else {
$("#share-pannel").stop().animate({
marginTop: 0
});
}
});
});

Кнопки «Поделится»

Данное решение может пригодится, например, для кнопок «Поделится».

#share-pannel {
    padding: 5px;
    position: absolute;
    left: -45px;
    top: 100px;
    width: 35px;
    background-color: rgba(17,17,17,0.8);
    border-radius: 3px 0 0 3px;
    color: #fff;
    transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
}

#share-pannel a {
display: inline-block;
vertical-align: inherit;
margin: 5px 0 0 2px;
padding: 0px;
font-size: 0px;
width: 30px;
height: 30px;
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll 0px 0px transparent;}

#share-pannel a.vkontakte {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -126px 0px transparent;
}
#share-pannel a.google {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -189px 0px transparent;
}
#share-pannel a.twitter {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -32px 0px transparent;
}
#share-pannel a.mail {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -294px 0px transparent;
}
#share-pannel a.odnoklassniki {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -95px 0px transparent;
}
#share-pannel a.email {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -379px 0px transparent;
}
#share-pannel a.print {
background: url("https://opttour.ru/wp-content/themes/tester/images/soc_icon_min.png") no-repeat scroll -410px 0px transparent;
}

soc_icon
soc_icon_min
soc_icon_micro

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Плавающий боковой блок Плавающий боковой блок Плавающий боковой блок Плавающий боковой блок
Изменение формы выбора вариаций
Рекомендации для васИзменение формы выбора вариацийOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.