Question

网页中有两个圆圈（两个divs）。我想要的是当我向下滚动时，它应该像下面在图片中提到的那样移动两个圆圈。

就像维恩图一样。当两个圆合并时，它应该创建一个新区域，如图所示，并且我们应该能够在其中写一些东西。是否可以将HTML与CSS一起使用还是我们还需要jQuery。我也看到了一些与skrollr框架有关的示例，但我不明白如何正确使用它。

Answer 1

您将需要100％的Javascript（或您的情况：JQuery作为扩展）。因此，您需要执行以下操作才能在滚动时使圆更靠近：

首先，您设置scroll事件监听器。检测用户是向上还是向下滚动（那里有很多有关如何执行此操作的教程）。

您现在需要的是计算。对于触发的每个滚动事件，您可以（例如）将0.1添加到变量中。因此，如果我向下滚动10px，则变量的值将为1。如果用户向下滚动，则适用此规则。
如果用户正在向上滚动，则需要为每个触发的滚动事件减去-0.1。

此变量将更改您圈子的CSS属性。我建议在两个圆圈上使用position: relative，在左圆圈上使用left: your_var，在右圆圈上使用right: your_var。这样，如果您向下滚动，圆会更靠近在一起。

var between = 0;
var lastScrollTop = 0;

$circle = $(".circle");
$left = $(".left");
$right = $(".right");
$(document).scroll(function() {

  var st = $(this).scrollTop();
  var scrollTop = $(document).scrollTop();
  if (st > lastScrollTop) {
    between += 0.7;
  } else {
    between -= 0.7;
  }
  scrollTop = $(document).scrollTop();
  $left.css({
    left: between + "px",
    top: scrollTop + "px"
  });
  $right.css({
    right: between + "px",
    top: scrollTop + "px"
  });
  lastScrollTop = st;
});

body {
  height: 100000px;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  flex-flow: row;
}

.circle {
  display: block;
  width: 100px;
  height: 100px;
  background: black;
  border-radius: 100%;
  position: relative;
  opacity: 0.4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="circle left">1</div>

  <div class="circle right">2</div>
</div>

到合并区域内的文本区域：
这是另一个问题，因为它是一个相当复杂的问题。

向下滚动时合并两个圆圈

1 个答案: