响应式 position 绝对 DIV 与 Javascript

Question

我有一个位于照片上方的带有文本的 div。 我写了一些 JS 来确保如果 div 的高度大于 500px，position 会返回继承。

当我查看手机或 Ipad 上的页面时，DIV 的位置就很好。

但是，当我减少计算机上的浏览器时，Javascript 仅在我刷新页面时才有效。 我希望它能够在我减小屏幕尺寸时做出响应。 我意识到我的 javascript 没有考虑到屏幕尺寸变化的移动。

我对 Javscript 相当陌生，所以我有点卡住了。

 parentHeight = document.getElementById('boxinside').offsetHeight; if (parentHeight > 500){ console.log(parentHeight) document.querySelector('#boxinside').style.position = "inherit"; } else { document.querySelector('#boxinside').style.position = "absolute"; }

 body { h1, h2, h3, h4, h5, h6, p { font-family: 'Lato'; } p { font-weight: 300; } background-color: white; position: relative; }.parallax-window { min-height: 300px; background: transparent; position: relative; object-fit: 50% 50%; img { width: 100%; object-fit: cover; height: 500px; } }.text { color: white; text-transform: uppercase; p { font-size: 25px; font-weight: 200; } h3 { font-family:'Lato'; font-weight: 500; letter-spacing: 2px; font-size: 30px; @include from-medium { font-size: 40px; } } font-family: 'Lato'; width: 100%; position: absolute; top: 30%; padding: 10px; display: flex; margin-left: 0px; align-items: flex-start; justify-content: center; flex-direction: column; @include from-medium-low { margin-left: 100px; } }.button { margin-top: 50px; padding: 10px 20px; background-color: white; a { color: #5B1B14; letter-spacing: 1px; text-decoration: none; } &:hover { color: white; background-color:#5B1B14; } }.photo-left { display: flex; flex-direction: column; align-items: center; justify-content: center; @include from-medium-low { flex-direction: row; align-items: inherit; justify-content: flex-start; } }.container-macaron { margin: 50px 20px; position: relative; }.header-text { h1 { margin-bottom: 0px; } h2 { color: #5B1B14; font-weight: 300; } } #boxinside { padding: 10px; position: absolute; background-color: white; left: 420px; p { margin-bottom: 0px; } }.photo { // img { // position: relative; // } padding: 10px 20px; }

 <div class="home"> <div class="parallax-window"> <img src="https://images.unsplash.com/photo-1590080876351-941da357bde6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2960&q=80" alt="Italian Trulli"> <div class="text"> <p>ABOUT US</p> <h3>Good quality baking<br> for a reasonable price</h3> </div> </div> </div> <div class="container-macaron"> <div class="photo-left"> <div class="photo"> <img src="https://images.unsplash.com/photo-1590080876351-941da357bde6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2960&q=80" alt="Italian Trulli" height='550px'> </div> <div class="text-box"> <div class="header-text"> <h1>Benjamin Pallais</h1> <h2 style='color:#5B1B14;'>Founder of Monsieur Macaron</h2> </div> <div id='boxinside'> <div class='boxtext'> <p class='question'><b>Who are you?</b></p> <p>Bonjour, I am Benjamin. Creator of Monsieur Macaron, foodie, and ex rugby player.</p> <br> <p class='question'><b>Why did you chose New Zealand?</b></p> <p>Probably, for the love of rugby and the attractions around the myth of the All Blacks. I first visited New Zealand in 2007, when I was 21 years old. Since that trip, I have been motivated to become a Kiwi.</p> <br> <p class='question'><b>Why did you become a Pastry chef?</b></p> <p>Probably the best job to express myself creatively with my patisserie, to allow me to travel around the world, and to provide happiness to my customers.</p> <br> <p class='question'><b>Why have you created Monsieur Macaron Ltd? Why did you choose macarons?</b></p> <p>In my opinion, Macarons are the most glamorous biscuit in the world. As a Parisien, the macaron is the most trendy patisserie and is well known to Kiwi people. The creation of the company gave me the opportunity to fully express myself, manage my own relationships with customers/partners, and have the honour of helping the NZ Food culture.</p> <br> <p class='question'><b>What's the best part of your job?</b></p> <p>Having the pleasure to sell my pasteries and meet my customers at the Farmers Market in Hastings every Sunday.</p> </div> </div> </div> </div> </div>

Answer 1

您可以使用以下代码来检测 window 调整大小：

function changePosition() {
  let parentHeight = document.getElementById('boxinside').offsetHeight;
  if (parentHeight > 500){
    console.log(parentHeight)
    document.querySelector('#boxinside').style.position = "inherit";
  } else {
    document.querySelector('#boxinside').style.position = "absolute";
  }
}

document.addEventListener("DOMContentLoaded", function() {
  changePosition();
});

window.addEventListener("resize", function(){
   changePosition();
});