scss 粘滞的社交媒体按钮漂浮在页面的一侧

Posted 2021-05-17

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 %}
```

{% 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>

@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;
  }
}