Question

我有两个div并排，第一个位于页面的60％左右，位于“相对”位置，第二个位于“绝对”右侧，因为这是我设法的唯一方法并排放置它们。

右侧的div仅约为网页整个高度的10％（约为1个视图端口的高度）。左侧的div大约可测量10个视口高度，它定义了网页的整个高度。因此，我希望能够在用户向下滚动时使右div向下滑动，以免在右div下方的左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的位置更改为fixed。您还需要使浮动div上的z-index稍高一些，以使其不与它下方的任何元素交互。这是我一起提出的一个简单例子。对不起，糟糕的颜色。

$(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的定位和粘滞滚动问题

1 个答案: