-2

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

Когда пользователь кликает по изображению, оно отображается на верху веб-страницы, даже если превью в самом низу.

Заранее извиняюсь, что ссылка на сайт, вместо кода: http://test.srv160751.hoster-test.ru/

1

2 ответа 2

1

Изображение при открытии "заворачивается" в класс .uk-open. Позиционирование изображения - в классе .uk-slidenav-position. Далее я основываюсь исключительно на коде из "консоли разработчика, в коде ниже отражены только изменения, которые необходимо внести в код:

<div class="uk-modal uk-open" style="position: fixed; ...">
<div class="uk-modal-dialog uk-modal-dialog-lightbox uk-slidenav-position" style="top: 50vh;">

top: 50vh отвечает за позиционирование элемента по вертикали. Отступ равен 50% высоты viewport. И на будущее: не пользуйтесь <div style="...">. Впоследствии неудобно будет изменять стили элементов, так как браузеры ставят больший приоритет стилям, которые прописаны в div. Это означет, что при конфликте таблицы стилей и style внутри тега (то бишь):

.uk-open { position: fixed; }

и:

<div class="uk-open" style="position: relative">...</div

Блок будет отображен со стилем position: relative.

0

Вот тебе пример как это можно сделать, а без кода я не знаю как там у тебя.

let box = document.querySelectorAll('.box')
for (let i = 0; i < box.length; i++) {
  box[i].addEventListener('click', function() {
    this.classList.add('enother-class')
  })
}
.block {
  width: 100%;
  height: 500px;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box {
  width: 200px;
  height: 200px;
  background-color: red;
  margin-top: 10px;
}

.enother-class {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<div class="block">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.