时间戳

首页 > 解决方案 > 如何创建一个滚动到底部然后保持固定的div

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

问题描述

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

最初，我设想将左侧固定，这样当用户向下滚动查看整个图像时，左侧的文本仍然可见。

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

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

在此处输入图像描述

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

如果这没有意义，例如 https://www.facebook.com上 Facebook 主页的右侧栏

这是我到目前为止的代码：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>

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

标签： javascriptjqueryhtmlcss

解决方案

推荐阅读