隐藏固定的社交媒体栏，直到在网页上向下滚动一定长度

<div class="social-media-bar">
  <!-- 社交媒体栏内容 -->
</div>

.social-media-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f1f1f1;
  /* 其他样式属性 */
}

window.addEventListener('scroll', function() {
  var scrollDistance = window.pageYOffset || document.documentElement.scrollTop;
  var triggerDistance = 200; // 设置触发隐藏的滚动距离

  if (scrollDistance > triggerDistance) {
    document.querySelector('.social-media-bar').style.display = 'none';
  } else {
    document.querySelector('.social-media-bar').style.display = 'block';
  }
});