JSFiddle - React, Tailwind, and code Playground

by Daehyun Im

HTML

<button id="flipperButton">
Flip
</button>
<div class="container">
  <div id="wrap1" style="order: 0" class="iframe-wrapper">
    <iframe id="iframe1" src="https://google.com"></iframe>
  </div>
  <div id="warp2" style="order: 1" class="iframe-wrapper">
    <iframe id="iframe2" src="https://bing.com"></iframe>
  </div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>
test
</div>

CSS

.container{
  display: flex;
  flex-direction: column;
  /*align-items: flex-start;*/
}
#flipperButton{
  font-size: 24px;
}

iframe {
 border : 0; 
}

JavaScript

var flipper = document.getElementById('flipperButton');
var iframes = document.getElementsByClassName('iframe-wrapper');
console.log(iframes);

window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 0 || document.documentElement.scrollTop > 0) {
    for (var iframe of iframes) {
    var currentOrder = parseInt(iframe.style.order);
    console.log(iframe, currentOrder);
    if(currentOrder > 0){
    	iframe.style.order = "0";
    } else {
    	iframe.style.order = "1";
    }
  }
  }
}