Блок «Поделиться» от Яндекс, с вертикальным плавающим отображением.

06-Мар-21 16:33

Блок «Поделиться» от Яндекс, с вертикальным плавающим отображением.

Отечественный интернет гигант Яндекс предоставляет огромное количество своих веб технологий для внедрения в различные проекты.

Сегодня рассмотрим способ интеграции блока «Поделиться».

  • Переходим к конструктору и настраиваем блок под свои нужды.
  • Для вертикального отображения, в div блок необходимо добавить атрибут
    data-direction="vertical" 
  • Для фиксации блока добавляем следующих js код:
    $(function(){
      var topPos = $('.share').offset().top;
      $(window).scroll(function() {
       var top = $(document).scrollTop();
       if (top > topPos) $('.share').addClass('fixed');
       else $('.share').removeClass('fixed');
      });
     }); 
  • Добавляем css стиль
    .share {
        margin-left: -45px;
        position: absolute;
    }
    .ya-share2__title {
        display: none;
    }
    .fixed {
        position: fixed;
        top: 10px;
        z-index: 9999;
    } 

Демо, с левой стороны))