Keep inline-block element on one side in place while scrolling, without position: fixed?-CodePudding

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 >
    <div >
        <!-- Content -->
    </div>
    <div >
        <!-- 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");
});

CodePudding user response：

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 >
    Header
  </div>
  <div >
    <div >
      Left
    </div>
    <div >
      Right
      <div style="height:200vh;"></div>
      With long content
    </div>
  </div>
</body>

CodePudding user response：

Use sematic elements like section and aside tags in html instead of div so it will make more friendly.

Use w3 as reference

CodePudding user response：

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