my modal position fix

To respect same-origin policy and so for this fiddle to work, the url of the iframe must be on fiddle.jshell.net .

by blueseal

HTML

<div class="app" style="height:200vh;padding-top:200px;">
 
  <iframe width="80%" height="500" title="test" src="https://csb-os3po.netlify.app/" sandbox="allow-same-origin allow-forms allow-scripts allow-top-navigation" class="wp-embedded-content" id="parent-iframe"></iframe>
</div>

JavaScript

let oldScrollPos = 0;
//do not lower MIN_SCROLL value something like 5 or 1, if you do, then it will send lot of messages to child whithin one seconds when user scrolls your wp site, it might reduce webapp performance (not good)
//if you want the modal to follow scrollbar asap then decrease it even more (below 50 but not like 5 or 7)
const MIN_SCROLL = 50;


//use ratesearch app origin when you use this code in wp site i.e. "https://ratesearch.primefreight.com"
const CHILD_ORIGIN = "https://csb-os3po.netlify.app";

window.onload = () => {
  console.log('onload is called'); //remove this line later
  window.addEventListener('scroll', this.handleScroll);
};


handleScroll = (event) => {

  const scrollTop = window.scrollY;

  //if parent is scrolled a bit, do not send message to child
  if (Math.abs(scrollTop - oldScrollPos) < MIN_SCROLL) {
    return;
  }

//this is for margin-top of child modal countdown section
  const relativeScrollPos = scrollTop - oldScrollPos;
  
  //you can even write your own logic based on no. of cards and no of expand cards
  // like if relativeScrollPos > SOMETHING (based on no. of cards + no of expand cards), then relativeScrollPos = SOMETHING
  //you can combine both iframe-height.js and sailing modal.js in one file and play around their vars, etc.

  oldScrollPos = scrollTop

  // console.log('handleScroll: scroll pos:', oldScrollPos, ", modal ht:", relativeScrollPos);

  const messageObj = {
    type: 'SCROLL_POSITION',
    payload: relativeScrollPos
  };


  //console.log('handleScroll: ', { messageObj}, CHILD_ORIGIN); //remove this line later

  const ifrm = document.querySelector('#parent-iframe');
  ifrm.contentWindow.postMessage(messageObj, CHILD_ORIGIN); //send message to child
}

//you might use jquery equivalent of this, you may ignore this if it doesn't work
window.addEventListener('beforeunload', () => {
  console.log('beforeunload is called'); //remove this line later
  window.removeEventListener('scroll',...