Блог

Главная - Вопросы по программированию - CSS: использование преобразования для перемещения элемента в определенное место в DOM

CSS: использование преобразования для перемещения элемента в определенное место в DOM

#javascript #css

#javascript #css

Вопрос:

У меня есть изображение (svg), которое начинается в середине страницы при загрузке. Когда пользователь прокручивает страницу вниз, я хочу, чтобы это изображение перемещалось вверх и влево, чтобы в конечном итоге оно было закреплено в верхнем левом углу.
я попытался использовать translate с номером прокрутки, но мне кажется, что это игра в угадайку, где окажется изображение и какой путь оно выберет. Вот что у меня было до сих пор.

 window.addEventListener('scroll', function(evt) {
  let image = document.getElementById('image');
  let scrollY = window.pageYOffset;

  // how do I use the scrollY to accomplish this? 
  image.style.transform = ?? 
 <div style="text-align: center; background: blue; height: 900px;">
  <img id="image" style=" margin-top: 200px; " src="mySvg.svg" />
</div>

Комментарии:

1. чтобы попытаться исправить ошибку <div style=»text-align: center; background: blue; height: 900px;»> но у img нет идентификатора «изображение»

2. извиняюсь, забыл добавить это при псевдокодировании.

3. покажите его другим искателям. у вас в коде есть несколько синтаксических ошибок. завершите исправление, как показано в ask.

4. какие еще синтаксические ошибки?

5. здравствуйте, я мог бы сделать этот более формальный способ кодирования. bcoz свойства css, которые вы использовали для этого, не так уж и полезны

Ответ №1:

для рабочего документа.getElementById(‘изображение’); необходимо иметь соответствующий элемент.

 <img id="image" style=" margin-top: 200px; " src="mySvg.svg" />