Question

我正在制作一个包含两个主要部分的页面，屏幕左半部分的div a将带有文本，而右半部分的div b将具有非常高的图像。

最初，我设想固定左侧，以便当用户向下滚动以查看整个图像时，左侧的文本保持可见。

但是，我意识到有时文本可能会超出屏幕，并且固定的div不会向下滚动以显示它。

下面是我正在谈论的图像：

我的问题是：我可以让左div向下滚动直到div的底部显示出来，然后在用户继续滚动时保持固定吗？

如果这没有道理，例如，Facebook主页的右栏位于 https://www.facebook.com

这是我到目前为止的代码：https://pastebin.com/ZPVEbjX9

html,
body {
  padding: 0;
  margin: 0;
  background-color: #FFF;
  color: #000;
  display: flex;
  font-family: Montserrat;
}

div#a {
  position: fixed;
  width: 40%;
  height: 100%;
}

div#box {
  position: absolute;
  width: 70%;
  height: 100%;
  margin: auto 0;
  background-color: #FFFAAA;
}

div#b {
  position: relative;
  width: 60%;
  height: 100%;
  margin-left: 40%;
  background-color: #000;
}

div#backToTop {
  position: fixed;
  width: auto;
  height: 30px;
  right: 20px;
  bottom: 20px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 5px;
}

a#backToTop {
  text-decoration: none;
  font-size: 15px;
  color: #FFF;
  padding: 10px;
  vertical-align: middle;
  line-height: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link type="text/css" rel="stylesheet" href="stylesBig.css" media="screen">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <title>G</title>
</head>

<body>

  <a name="top"></a>

  <div id="a">
    <div id="box">
      <p>a</p>
    </div>
  </div>

  <div id="b">
    <img src="image.png" style="width: 100%;" />
    <div id="backToTop"><a id="backToTop" href="#top">back to top</a></div>
  </div>

</body>

</html>

我在做什么错，我该如何解决？

如何创建滚动到底部然后保持固定的div

0 个答案: