Issue with positioning and sticky scroll of absolute div

Question

I have two divs side by side, the first on about 60% of the page is positioned as "relative" on the left, the second is placed as "absolute" on the right as it is the only way I managed to place them side by side.

The div on the right is only about 10% (measures about 1 view port height) of the full height of the webpage. The div on the left which measures roughly 10 viewport heights defines the full height of the webpage. Hence, I would like to be able to have the right div slide down as the user scrolls down so as to not leave a blank space on the right of the left div below the right div.

The issue is that I can't manage to have the right div set as sticky and scroll down and still keep them right next to eachother at the top when the page first loads. The sticky div will be on top whhile the left div starts just when the sticky div finishes. Basically it behaves the same as if I set both of them relative but I need the right divv to behave as an absolute div before it becomes sticky to preserve the positioning.

With absolute positioning:

.mainbodyfx {
  width: 60vw;
  padding-left: 10vw;
  right: 40vw;
  margin-left: 0;
  margin-right: 0;
height: 10vh;
}

.floatingfxbuy {
  position: absolute;
  background-color: transparent;
  width: 20vw;
  left: 75%;
height:1vh;
}

<div> Content of full height and width slider </div>
<div class=floatingfxbuy> Right div that needs to slide down with scroll </div>
<div class="mainbodyfx"> Left div that defines the height of the whole webpage</div>

With sticky positioning:

.mainbodyfx {
  width: 60vw;
  padding-left: 10vw;
  right: 40vw;
  margin-left: 0;
  margin-right: 0;
height: 10vh;
}

.floatingfxbuy {
  position: sticky;
  background-color: transparent;
  width: 20vw;
  left: 75%;
height:1vh;
}

<div> Content of full height and width slider </div>
<div class=floatingfxbuy> Right div that needs to slide down with scroll </div>
<div class="mainbodyfx"> Left div that defines the height of the whole webpage</div>

Answer 1

So, it's hard to tell exactly what you're asking for but I think I'm close to what you're asking for. Essentially if you want a floating side div you need to treat it as completely separate from the other div. Really as far as the css and html goes the .floatingfxbuy div is separate from the entire page. If you want the floating div to be absolute positioned until you scroll to a certain height you need to use JavaScript to change the position to fixed for the div when the window scrolls to a certain point. You also need to have the z-index slightly higher on the floating div so that it doesn't interact with any elements "underneath" it. Here is a quick example I threw together. Sorry about the terrible colors.

$(document).ready(function() { // at document ready run this function
  var $window = $(window); // local variable to window
  $window.on('scroll resize', function() { // on window scroll or resize run this function
    if ($window.scrollTop() > 50) { // if the top of the window is lower than 50px then add the fix class to the .floating-side-div
      $('.floating-side-div').addClass('fix');
    } else { // if the top of the window is heigher than 100px remove the fix class
      $('.floating-side-div').removeClass('fix');
    }
  });
});

body {
  margin: 0;
  /* get rid of some default body styles */
}

.page-container {
  min-height: 200vh;
  /* set height of page so we can scroll to test */
  width: 100%;
  background-color: green;
}

.content-div {
  width: 60vw;
  /* width you suggested */
  height: 50vh;
  /* random height for content */
  margin-left: 10vw;
  /* some left margin you want */
  background-color: red;
}

.floating-side-div {
  height: 10vh;
  /* 10% viewport height like you want */
  width: 20vw;
  /* width you have in your css */
  background-color: blue;
  position: absolute;
  /* to start we want absolute position */
  right: 0;
  /* put it at the right of the page */
  top: 0;
  /* put it all the way at the top. you can change this if you want */
  z-index: 99;
  /* increase z-index so we're over top of the other elements on the page and don't distort the page when scrolling */
}

.floating-side-div.fix {
  position: fixed;
  /* change from absolute to fix so we 'fix' the div to a spot in the viewport. in this example top: 0, right: 0; */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="page-container">
  <!-- our page container -->
  <div class="content-div"></div>
  <!-- the content div(your .mainbodyfx) -->
  <div class="floating-side-div"></div>
  <!-- the floating div(your .floatingfxbuy) -->
</div>