绝对 div 的定位和粘性滚动问题

Question

我有两个 div 并排放置，第一个在大约 60% 的页面上位于左侧 "relative"，第二个位于 "absolute"正确的，因为这是我设法将它们并排放置的唯一方法。

右侧的div仅占网页全高的10%左右（约1个视口高度）。左侧的 div 测量了大约 10 个视口高度，定义了网页的完整高度。因此，我希望能够在用户向下滚动时让右侧 div 向下滑动，以免在左侧 div 右侧下方留下空白 space div.

问题是我无法将正确的 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 而言，.floatingfxbuy div 与整个页面是分开的。如果您希望浮动 div 绝对定位，直到您滚动到某个高度，您需要使用 JavaScript 将 div 的位置更改为固定，当 window滚动到某个点。您还需要使浮动 div 上的 z-index 稍微高一点，这样它就不会与任何元素交互 "underneath"。这是我放在一起的一个简单示例。抱歉颜色太差了。

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

绝对 div 的定位和粘性滚动问题

Issue with positioning and sticky scroll of absolute div

css

css-position

sticky

absolute