Редактор HTML

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;height:2000px;}

.icon-bar {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.content {
  margin-left: 75px;
  font-size: 30px;
}
</style>
<body>

<div class="content">
  <h3>Липкая социальная панель</h3>
  <p>Липкая социальная панель будет прилипать к экрану при прокрутке.</p>
  <p>Некоторый текст для возможности прокрутки. Lorem ipsum dolor sit Amet, Illum Definitions No quo, Maluisset Concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert Laboramus Repudiandae, не включенный в другие категории. Inciderint efficiantur его реклама. Eum no molestiae voluptatibus.</p>
  <p>Некоторый текст для возможности прокрутки. Lorem ipsum dolor sit Amet, Illum Definitions No quo, Maluisset Concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert Laboramus Repudiandae, не включенный в другие категории. Inciderint efficiantur его реклама. Eum no molestiae voluptatibus.</p>
  <p>Некоторый текст для возможности прокрутки. Lorem ipsum dolor sit Amet, Illum Definitions No quo, Maluisset Concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert Laboramus Repudiandae, не включенный в другие категории. Inciderint efficiantur его реклама. Eum no molestiae voluptatibus.</p>
  <p>Некоторый текст для возможности прокрутки. Lorem ipsum dolor sit Amet, Illum Definitions No quo, Maluisset Concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert Laboramus Repudiandae, не включенный в другие категории. Inciderint efficiantur его реклама. Eum no molestiae voluptatibus.</p>
  <p>Некоторый текст для возможности прокрутки. Lorem ipsum dolor sit Amet, Illum Definitions No quo, Maluisset Concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert Laboramus Repudiandae, не включенный в другие категории. Inciderint efficiantur его реклама. Eum no molestiae voluptatibus.</p>
  <p>Некоторый текст для возможности прокрутки. Lorem ipsum dolor sit Amet, Illum Definitions No quo, Maluisset Concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert Laboramus Repudiandae, не включенный в другие категории. Inciderint efficiantur его реклама. Eum no molestiae voluptatibus.</p>
  <p>Некоторый текст для возможности прокрутки. Lorem ipsum dolor sit Amet, Illum Definitions No quo, Maluisset Concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert Laboramus Repudiandae, не включенный в другие категории. Inciderint efficiantur его реклама. Eum no molestiae voluptatibus.</p>
 </div>

</body>
</html>

Сохраните ваш код

Не удалось сохранить код

Ваш код был сохранен

Сохранить на Google диске

Открыть файл из Google диска

Сообщить об ошибке: