megclaypool
6/27/2019 - 12:27 AM

Sticky social media buttons floating on the side of a page

[Sticky social media buttons floating on the side of a page]

I set this up for PRC, which is a Drupal 8 site. However, this would work in WordPress too.

Howto.md
content_copyfile_download
  • Rendered
  • Source

How they look/act:

  1. The socialsharing buttons live inside the main content area, but outside the content container.
  2. On smaller screens they are oriented horizontally above the title and scroll with the content.
  3. On larger screens they are oriented vertically and are "sticky" They stay centered at 50% until the main content slides off the screen and then they slide offscreen with the main content (not floating over the footer).

Things of note:

  1. The main content block has position: relative;
  2. The socialsharing icons are double wrapped.
    • On smaller screens, the outside wrapper has the same max-widths as a .container so it matches the width & margins of the content.
    • On larger screens, the outside wrapper has position: absolute; and height: 100%;. This makes the wrapper actually fill 100% of the height of the main content area, giving a "track" that the social media icons can slide around inside.
  3. On smaller screens, the inner container is a horizontally oriented flexbox.
  4. On larger screens, the inner container is a vertically oriented flexbox.
  5. In order to be in the main content area but outside the container, the socialsharing twig template is included in the base.twig template, with a 'sticky-left' modifier:
{% if not homepage %}
 {% include "@molecules/15-social-media/10-sharing-buttons/10-sharing-buttons.twig" with {
   socialsharing_modifiers: ['sticky-left'],
   facebook: true,
   twitter: true,
   sharethis: true
 } only %}
{% endif %}
10-sharing-buttons.twig
content_copyfile_download
{% set wrapper_mods = '' %}

{% set mods = '' %}
{% for mod in socialsharing_modifiers %}
  {% set mods = mods ~ " socialsharing--" ~ mod %}
{% endfor %}

<div class="socialsharing__wrapper">
  <div class="socialsharing {{ mods }}">
    {% if twitter %}
      <div class="socialsharing__button st-custom-button" data-network="twitter">
        <i class="icon icon-twitter" title="{{ 'Share on Twitter'|trans }}"></i>
      </div>
    {% endif %}

    {% if facebook %}
      <div class="socialsharing__button st-custom-button" data-network="facebook">
        <i class="icon icon-facebook" title="{{ 'Share on Faceook'|trans }}"></i>
      </div>
    {% endif %}

    {% if sharethis %}
      <div class="socialsharing__button st-custom-button" data-network="sharethis">
        <i class="icon icon-sharethis" title="{{ 'Share with ShareThis'|trans }}"></i>
      </div>
    {% endif %}
  </div>
</div>
_10-sharing-buttons.scss
content_copyfile_download
@import "../../../variables";
@import "../00-social-link/00-social-link";


.socialsharing__wrapper {
  $socialsharing-breakpoint: 1020px;
  $socialsharing-max-widths:
    ($breakpoint-sm: 540px,
    $breakpoint-md: 720px,
    $breakpoint-lg: 960px);

  margin-right: auto;
  margin-left: auto;
  @include rem('padding-left', $gutter-width);
  @include rem('padding-right', $gutter-width);
  position: relative;

  @each $breakpoint,
  $max-width in $socialsharing-max-widths {
    @include breakpoint($breakpoint) {
      max-width: $max-width;
    }
  }

  @include breakpoint($socialsharing-breakpoint) {
    height: 100%;
    margin: 0;
    max-width: unset;
    padding: 0;
    position: absolute;
    top: 0;
  }

  .socialsharing {
    display: flex;
    position: relative;
    @include socialmedia(40px, 17px, $color--marine-blue, white, false);

    @media (min-width: $socialsharing-breakpoint) {
      display: block;
      padding-bottom: 0;
      padding-left: 0;
      position: absolute;
      @include rem('top', 100px);
    }

    &--sticky-left {
      @include rem('padding-bottom', 20px);

      @media (min-width: $socialsharing-breakpoint) {
        position: sticky;
        // 132px is the height of the header
        top: calc(50% + 132px);
        transform: translateY(-50%);
      }

      .socialsharing__button {

        @media (min-width: $socialsharing-breakpoint) {
          @include rem('margin-bottom', 7px);
        }
      }
    }
  }

  .socialsharing__button {
    cursor: pointer;
  }
}