Question 36885 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

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

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");
});
Tags:

3

Answers


  1. 0

    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 {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding-top: 40px;
  
}

.header {
  z-index: 1000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 40px;
  background-color: lightgray;
}

.container {
  display: flex;
  flex: 1 0 auto;
}

.left {
  flex-basis: 300px;
  background-color: lightblue;
}

.sticky {
  position: sticky;
  top: 40px
}

.right {
  flex: 1;
  overflow: auto;
  background-color: lightyellow;
}

.footer {
  background-color: lightgray;
}

div {
  box-sizing: border-box;
}

.pad {
  padding: 5px;
}
    <body>
  <div class="header pad">
    Header
  </div>
  <div class="container">
    <div class="left">
      <div class="sticky pad">
        Left
        <div style="height:60vh;"></div>
        Left Bottom
      </div>
    </div>
    <div class="right pad">
      Right
      <div style="height:200vh;"></div>
      Right Bottom
    </div>
  </div>
  <div class="footer pad">
    Footer
    <div style="height:30vh;"></div>
    Footer Bottom
  </div>
</body>

    Another way I have done things in the past would be to scroll just the right content div and include the footer over there (not full width). Like below.

    body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.header {
  flex: 0 0 40px;
  background-color: lightgray;
}

.container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.left {
  flex-basis: 300px;
  overflow: auto;
  background-color: lightblue;
}

.right {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background-color: lightyellow;
}

.right-content {
  flex: 1 0 auto;
}

.footer {
  background-color: lightgray;
}

div {
  box-sizing: border-box;
}

.pad {
  padding: 5px;
}
    <body>
  <div class="header pad outline">
    Header
  </div>
  <div class="container">
    <div class="left pad outline">
      Left
    </div>
    <div class="right">
      <div class="right-content pad outline">
        Right
        <div style="height:200vh;"></div>
        Right End
      </div>
      <div class="footer pad outline">
        Footer
      </div>
    </div>
  </div>
</body>
    Login or Signup to reply.
  2. 0

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

    Use w3 as reference

    Login or Signup to reply.
  3. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search