/ Сайтостроение / Дизайн / Плавающий боковой блок

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

HIT

24.03.2016

1055

Иногда бывает нужно чтобы какой-либо боковой блок пролистывался вместе с основным контентом. При этом, этот блок будет будет следовать с небольшой задержкой привлекая дополнительно внимание.
Ставим его перед выводом основного блока (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 минут.