无论滚动如何，如何将位置绝对 div 翻译在另一个之上

Question

我想显示一张图片和一些文字。 当用户将鼠标悬停在文本上时，我希望图片显示其他图片。 我有其他图片，当用户将鼠标悬停在文本上时，我希望更改后的图片成为视口上当前可见的图片。

我在页面上有一个 div，我希望另一个 div 悬停在第一个的顶部。 我让它工作了，但它在滚动时中断。 我希望position: absolute风格保持不变，并希望使用translate进行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>

Answer 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(); 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>

Answer 2

在这里你只需要计算窗口的滚动偏移

 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>