I am making a page with two main parts, div a on the left half of the screen which will have text, and div b on the right half which will have a really tall image.
Originally, I imagined having the left side fixed so that when the user scrolls down to see the entire image, the text on the left stays visible.
However, I realized sometimes the text may overflow beyond the screen, and the fixed div would not scroll down to show it.
Below is the image of what I'm talking about:
My question is: can I make the left div scroll down until the bottom of the div is revealed, and then stays fixed as the user continues to scroll?
If that didn't make sense, an example is the right bar of the Facebook main page at https://www.facebook.com
Here is the code I have so far: 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>What am I doing wrong and how can I fix it?
