Проблема с позиционированием и липкой прокруткой абсолютного деления

Question

У меня есть два элемента div рядом, первый примерно на 60% страницы позиционируется как "относительный" слева, второй - как "абсолютный" справа, так как это единственный способ, которым мне удалось разместите их рядом.

Элемент div справа составляет всего около 10% (примерно 1 высота порта просмотра) от полной высоты веб-страницы. Div слева, который измеряет примерно 10 высот области просмотра, определяет полную высоту веб-страницы. Следовательно, я бы хотел, чтобы правый блок скользил вниз по мере того, как пользователь прокручивает страницу, чтобы не оставить пустое пространство справа от левого блока ниже правого блока.

Проблема в том, что Мне не удается настроить правильный div как закрепленный и прокручивать вниз, и все равно держать их прямо рядом друг с другом вверху при первой загрузке страницы. Липкий div будет сверху, пока левый div начинается только тогда, когда заканчивается липкий div. По сути, он ведет себя так же, как если бы я устанавливал их оба относительно, но мне нужно, чтобы правильный divv вел себя как абсолютный div, прежде чем он станет липким, чтобы сохранить позиционирование.

С абсолютным позиционированием:

.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>

С липким позиционированием:

.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

Итак, трудно сказать точно, что вы просите, но я думаю, что я близок к тому, что вы просите. По сути, если вам нужен плавающий элемент div, вы должны рассматривать его как полностью отдельный от другого элемента div. Действительно, что касается css и html, div .floatingfxbuy отделен от всей страницы. Если вы хотите, чтобы плавающий элемент div находился в абсолютном положении до тех пор, пока вы не прокрутите его до определенной высоты, вам нужно использовать JavaScript, чтобы изменить положение на фиксированное для элемента div, когда окно прокручивается до определенной точки. Вам также нужно немного увеличить z-индекс на плавающем элементе div, чтобы он не взаимодействовал с какими-либо элементами «под ним». Вот быстрый пример, который я бросил вместе. Извините за ужасные цвета.

$(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>