Статические социальные кнопки в нижнем колонтитуле, чтобы плавать в середине страницы CSS? - PullRequest
Новая
       17

Статические социальные кнопки в нижнем колонтитуле, чтобы плавать в середине страницы CSS?

0 голосов
/ 19 февраля 2019

Я сгенерировал социальные кнопки и вставил код в html внутри Body: 

<body>
<div class="shareaholic-canvas" data-app="follow_buttons" data-app-id="28043174"></div>
</body>

Проблема в том, что кнопки остаются статичными в нижнем правом углу внутри нижнего колонтитула: http://builder.ferozo.com/1589630/#!/-home/

Я хочу, чтобы они плавали в центре справа все время, как в этом примере: https://www.robertlandscapes.com/.

Я пробовал в CSS свойство выравнивать div по центру по вертикали, но это было невозможно с тех пор, как кнопкиоставайтесь только в нижнем колонтитуле или переходите в верхний колонтитул, когда я пытаюсь использовать другие свойства, такие как display.

HTML 

<div class="shareaholic-canvas"
data-app="follow_buttons"
data-app-id="28043174">
</div>

CSS 

.shareaholic-canvas {

}

Спасибо!

Ответы [ 6 ]

0 голосов
/ 19 февраля 2019

Еще один ответ, который мало чем отличается от других. Но с помощью этого фрагмента вы можете расположить свои элементы в точном центре окна с меньшим количеством кода. 

.shareaholic-canvas {
    position: fixed;
    right: 0;
    top: calc(50% - 72.5px);
}
0 голосов
/ 19 февраля 2019

Это более полная демонстрация, включающая контейнеры с кнопками (ссылками), а также переходы при наведении на них и фирменные цвета.

enter image description here

body {
  min-height: 10000px;
  background-image: url(https://www.robertlandscapes.com/wp-content/uploads/2018/06/slider-BG-5-2.jpg?x48514);
  background-repeat: repeat;
}

.shareaholic-canvas {
  display: flex;
  flex-direction: column;
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateZ(0);
  z-index: 10;
  overflow: hidden;
}

.shareaholic-canvas > a {
  display: inline-block;
  width: 52px;
  height: 42px;
  right: -10px;
  position: relative;
  transition: 0.3s transform;
}

.shareaholic-canvas > a:hover,
.shareaholic-canvas > a:focus {
  transform: translateX(-10px);
}

.youtube { background-color: #e02a20; }

.twitter { background-color: #4da7de; }

.facebook { background-color: #3e5b98; }

.instagram { background-color: #9c7c6e; }
<div class="shareaholic-canvas">
  <a class="youtube" href="#"></a>
  <a class="twitter" href="#"></a>
  <a class="facebook" href="#"></a>
  <a class="instagram" href="#"></a>
</div>

jsFiddle

0 голосов
/ 19 февраля 2019

добавить следующий стиль внутри класса .btn-toolbar 

.btn-toolbar{
background-color: #00704afa;
    position: fixed;
    right: -145px;
    top: 25%;
    transform: rotate(90deg);
    transform-origin: left top 0;
}

Ширина, высота и фон изменятся соответственно вам

0 голосов
/ 19 февраля 2019

Вот, пожалуйста, добавьте это в класс .btn-toolbar. 

.btn-toolbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%; 
}
0 голосов
/ 19 февраля 2019

Мое лучшее предложение - использовать атрибут позиции.Как и в вашем примере, социальные кнопки зафиксированы в правой (средней) части сайта.

Попробуйте: 

body {
      position: relative;
}
.shareaholic-canvas {
      position: fixed;
      top: calc(50%);
      z-index: 100;
      right: 0;
}
0 голосов
/ 19 февраля 2019

Попробуйте это. 

.shareaholic-canvas{
     position: fixed; // this holds the position at all times
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     z-index: 100;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...