Как перевести абсолютный div позиции поверх другого независимо от прокрутки

ProgramBox

Как перевести абсолютный div позиции поверх другого независимо от прокрутки

Post author:admin
Запись опубликована:6 марта, 2023
Post category:Вопросы по программированию

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу показать картинку и немного текста. Когда пользователь наводит курсор на текст, я хочу, чтобы на картинке отображалась какая-то другая картинка. У меня есть другие изображения, и когда пользователь наводит курсор на текст, я хочу, чтобы измененное изображение было видимым в данный момент изображением на экране просмотра.

У меня есть div на странице, и я хочу, чтобы другой div зависал над первым. У меня это работает, но оно прерывается при прокрутке. Я хочу position: absolute , чтобы стиль остался и хотел преобразовать его с помощью translate . Причина, по которой мне нужно вычислить границы и перевести, заключается .onpage в том, что div изменяется так, что я должен показать его изменения.

 let $onpage = document.getElementById('onpage');
let $onhover = document.getElementById('onhover');

let $triggers = document.querySelectorAll('.trigger');

function fTranslate(pos) {
  return el => {
    el.style.transform = `translate(${pos[0]}px,${pos[1]}px)`;
  };
}

function show() {
  let bounds = $onpage.getBoundingClientRect();
  let pos = [bounds.left, bounds.top];

  fTranslate(pos)($onhover);
}

$triggers.forEach(_ => {
  _.addEventListener('mouseover', _ => {
    show();  
  });
});

 .on-hover {
  position: absolute;
  top: 0;
  left: 0;
}

.on-page {
  width: 50vmin;
  height: 50vmin;
  background: red;
}

.on-hover {
  width: 40vmin;
  height: 40vmin;
  background: #ccc;
}

.content {
  height: 10000px;
}

#trigger1 {
  margin-top: 10px;
}

#trigger2 {
  margin-top: 100px;
}

 <div class="wrap">
<div id='onpage' class="on-page"></div>

<span id="trigger1" class="trigger">Hover 1</span>
<p>Some content
<span id="trigger2" class="trigger">Hover 2</span>
</p>

<div id='onhover' class="on-hover"></div>

<div class="content"></div>
</div>

1. Если вы хотите, чтобы элемент оставался там, тогда не переводите его? Неясно, каким должен быть конечный результат, поскольку ваше желание противоречит тому, что вы пытаетесь сделать.

2. Я на самом деле вычисляю позицию и показываю элемент при прокрутке.

3. Пожалуйста, перефразируйте свой вопрос так, чтобы он имел смысл.

4. Не могли бы вы вместо этого объяснить, почему вы делаете то, что делаете? Почему вы хотите, чтобы DIV накладывал DIV на прокрутку? Вы пытаетесь запретить пользователю нажимать на этот нижний DIV? Чего вы на самом деле пытаетесь достичь? Похоже на проблему XY

Ответ №1:

здесь вам просто нужно было вычислить смещение прокрутки окна

 let $onpage = document.getElementById('onpage');
let $onhover = document.getElementById('onhover');

function fTranslate(pos) {
  return el => {
    el.style.transform = `translate(${pos[0]}px,${pos[1]}px)`;
  };
}

let bounds = $onpage.getBoundingClientRect();
let pos = [bounds.left, bounds.top];

fTranslate(pos)($onhover);

document.addEventListener('scroll', () => {
  let bounds = $onpage.getBoundingClientRect();

    const scrollLeft =
      window.pageXOffset || document.documentElement.scrollLeft;
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 const offsetLeft = bounds.left   scrollLeft;
    const offsetTop = bounds.top   scrollTop;
  let pos = [offsetLeft, offsetTop];

  fTranslate(pos)($onhover);
});

 .on-hover {
  position: absolute;
  top: 0;
  left: 0;
}

.on-page {
  width: 50vmin;
  height: 50vmin;
  background: red;
}

.on-hover {
  width: 40vmin;
  height: 40vmin;
  background: #ccc;
}

.content {
  height: 10000px;
}

 <div class="wrap">
<div id='onpage' class="on-page"></div>

<div id='onhover' class="on-hover"></div>

<div class="content"></div>
</div>

Ответ №2:

Пожалуйста, дайте мне знать, если я неправильно понял. Если вы хотите, чтобы серый квадрат оставался фиксированным, вы можете изменить значения в вашем translate на отрицательные, чтобы получить положительное смещение.

 let $onpage = document.getElementById('onpage');
let $onhover = document.getElementById('onhover');

function fTranslate(pos) {
  return el => {
    el.style.transform = `translate(${-pos[0]}px,${-pos[1]}px)`;
  };
}

let bounds = $onpage.getBoundingClientRect();
let pos = [bounds.left, bounds.top];

fTranslate(pos)($onhover);

document.addEventListener('scroll', () => {
  let bounds = $onpage.getBoundingClientRect();
  let pos = [bounds.left, bounds.top];

  fTranslate(pos)($onhover);
});

 .on-hover {
  position: absolute;
  top: 0;
  left: 0;
}

.on-page {
  width: 50vmin;
  height: 50vmin;
  background: red;
}

.on-hover {
  width: 40vmin;
  height: 40vmin;
  background: #ccc;
}

.content {
  height: 10000px;
}

 <div class="wrap">
<div id='onpage' class="on-page"></div>

<div id='onhover' class="on-hover"></div>

<div class="content"></div>
</div>