How would you get an element/div to stay in place (WITHOUT position: fixed;) while you scroll? (Actually, this page is a perfect example. The left side with the buttons do not move, while you can scroll this page where the content of this/my post is.)
Say, you have two divs, both are inline-block. The left div you want to stay in place. You only want to allow scrolling on the right div. (different tracks). position: fixed; doesn't really give me the result I'm looking for. Open to any solutions in CSS, vanilla JS, and/or jQuery. Here's some code that I've been trying:
HTML:
<div class="container">
<div class="left">
<!-- Content -->
</div>
<div class="right">
<!-- Content -->
</div>
</div>
CSS:
.left {
display: inline-block;
vertical-align: top;
background-color: #F9F9F9;
border-right: 2px solid $blueBorder;
padding: 0.5%;
overflow-x: hidden;
overflow-y: hidden;
}
.right {
display: inline-block;
vertical-align: top;
background-color: gray;
padding: 0.5%;
}
jQuery:
$(window).scroll(function() {
$('#left').css('top', $(this).scrollTop() + "px");
});
This can be done with pure css. As you pointed out, this page is an example. If you dig into it with your browser dev tools you will find something similar to this below.
body {
height: 100vh;
margin: 0;
display: flex;
flex-direction: column;
}
.header {
flex: 0 0 40px;
border: 1px solid black;
}
.container {
display: flex;
flex: 1;
overflow: hidden;
border: 1px solid black;
}
.left {
flex-basis: 300px;
border: 1px solid black;
}
.right {
flex: 1;
border: 1px solid black;
overflow: auto;
}<body>
<div class="header">
Header
</div>
<div class="container">
<div class="left">
Left
</div>
<div class="right">
Right
<div style="height:200vh;"></div>
With long content
</div>
</div>
</body>What's cool is you can just inspect this website using Right-Clicking and just look at StackOverflow's Code. They're going the Sticky Method, I've done a barebones version below
#contents{
display: flex;
}
#left{
background-color:yellow;
position: relative !important;
width:150px;
}
#sticky{
position: sticky;
background-color:red;
top: 0;
}
#right{
background-color:blue;
position: relative !important;
width:150px;
height:650px;
}<div id="contents">
<div id="left">
<div id="sticky">
top<br>
blah<br>
</div>
</div>
<div id="right">
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
</div>
</div>edit, grammar/spelling