<div class="share-bar">
  <a href="#" class="share-icon facebook" aria-label="Facebook">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
  </a>
  <a href="#" class="share-icon twitter" aria-label="Twitter">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
  </a>
  <a href="#" class="share-icon linkedin" aria-label="LinkedIn">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
  </a>
  <a href="#" class="share-icon email" aria-label="Email">
    <svg viewBox="0 0 24 24" width="20" height="20" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
  </a>
</div>
<div style="height: 1000px; padding: 20px; margin-left: 60px; font-family: sans-serif;">
  <h2>Scroll the page</h2>
  <p>The social bar stays fixed on the left.</p>
</div>

.share-bar {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  border-radius: 0 8px 8px 0;
  overflow: hidden;
  z-index: 100;
}
.share-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.share-icon:hover {
  width: 65px;
}
.share-icon svg {
  stroke: #fff;
  fill: none;
}
.facebook { background: #3b5998; }
.twitter { background: #000000; }
.linkedin { background: #0077b5; }
.email { background: #ea4335; }