響應式 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();
});