Scrollable Sidebar When Scrolling Main Content Div

Question

I am wanting to create a side bar similar to the adminstrator sidebar in the back end of Wordpress meaning when I scroll down the main page, if the sidebar has more content, it will scroll as well until it reaches the bottom of its content and stops. When scrolling up the reverse happens. The basic layout I have is below:

<body>
    <header id="Brand">
        <div id="Content"></div>
    </head>
    <div id="Main"></div>
</body>

My CSS curretly is:

#Brand
{
    bottom: 0;
    left: 0;
    min-width: 300px;
    overflow: auto;
    position: fixed;
    top: 0;
    width: 34%;
}

#Main
{
    float: right;
    width: 63%;
}

If you want scroll functionality on your sidebar, just add `overflow-y: scroll`. — aug, Jan 20 '15 at 01:38
I tried that, but it does not scroll with my main content div, It only scrolls when I change the focus to something inside my sidebar which is not what I want. I want the page/sidebar to scroll regardless of where the focus is. — MrJman006, Jan 20 '15 at 01:52

score 0 · Answer 1 · answered Jan 20 '15 at 02:14

0

If I understood your question correctly, you want the sidebar to scroll when you scroll down the page. Unfortunately, I don't think this is possible with just CSS. If you use JavaScript, you can achieve something like this by animating to the scroll position desired.

$(window).scroll(function(e) {
  $('#Content').animate({
    scrollTop: $(this).scrollTop()
  }, 0);
});

body {
  position: relative;
  margin: 0;
}
#Content {
  bottom: 0;
  left: 0;
  min-width: 200px;
  overflow-y: scroll;
  position: fixed;
  height: 100%;
  top: 0;
  width: 50px;
  background: red;
}
.inner {
  height: 1000px;
}
#Main {
  width: 63%;
  height: 1000px;
  background: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="Content">
    <div class="inner">
      <ul>
        <li>Home</li>
        <li>Page 1</li>
        <li>Page 2</li>
        <li>Page 3</li>
      </ul>
    </div>
  </div>
  <div id="Main"></div>
</body>

answered Jan 20 '15 at 02:14

aug

11,138
9
72
93

This is the the kind of functionality I am looking for, but will this work assuming #Content has a shorter length than #Main? – MrJman006 Jan 20 '15 at 21:38
I just tried this with #Main height at 2000px and the side bar does not scroll up when I scroll up and am past 1000 length on #Main. How would I go about fixing that? – MrJman006 Jan 20 '15 at 22:07
I also just tried using two variables thisScrollTop and lastScrollTop and using the difference, but that did not work either. (lastScrollTop = thisScrollTop; thisScrollTop = $(this).scrollTop();) and then in animate (scrollTop: lastScrollTop - thisScrollTop;) – MrJman006 Jan 20 '15 at 22:39
What would you want to happen if the sidebar was shorter than the overall content? – aug Jan 20 '15 at 23:08

score 0 · Answer 2 · edited May 23 '17 at 12:28

Aug's answer did get closer to what I was looking for and scrolled both divs, but did not achieve the exact result I was looking for. While researching I came across some code that, with some modification, does exactly what I need. The base solution came from here (https://stackoverflow.com/a/18953340/3098124 Pawel's answer). Here is the modified code and a JSFiddle.

HTML

<div id="div1">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium faucibus pulvinar. Praesent elementum viverra pulvinar. Curabitur ut risus non quam volutpat imperdiet. Vivamus hendrerit sed mauris vel faucibus. Ut elementum elementum sapien, in faucibus nunc tincidunt eu. Curabitur in quam tortor. In gravida nisi in quam aliquam blandit.

Quisque malesuada sapien non dolor varius molestie. Duis interdum leo in sapien congue tristique. Curabitur ultricies erat congue eros hendrerit, et commodo libero tincidunt. Morbi quis bibendum purus. Fusce volutpat, dolor id dapibus imperdiet, elit justo ultricies arcu, eget semper enim Quisque malesuada sapien non dolor varius molestie. Duis interdum leo in sapien congue tristique. Curabitur ultricies erat congue eros hendrerit, et commodo libero tincidunt. Morbi quis bibendum purus. Fusce volutpat, dolor id dapibus imperdiet, elit justo ultricies arcu, eget semper enim
</div>

<div id="div2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pretium faucibus pulvinar. Praesent elementum viverra pulvinar. Curabitur ut risus non quam volutpat imperdiet. Vivamus hendrerit sed mauris vel faucibus. Ut elementum elementum sapien, in faucibus nunc tincidunt eu. Curabitur in quam tortor. In gravida nisi in quam aliquam blandit.

Quisque malesuada sapien non dolor varius molestie. Duis interdum leo in sapien congue tristique. Curabitur ultricies erat congue eros hendrerit, et commodo libero tincidunt. Morbi quis bibendum purus. Fusce volutpat, dolor id dapibus imperdiet, elit justo ultricies arcu, eget semper enim diam et lorem. Mauris fringilla sapien vitae ultricies tristique. Nulla imperdiet enim vel purus interdum venenatis. Praesent a tincidunt tortor. Maecenas ullamcorper elit leo, a vehicula libero ornare quis. Quisque in tellus id purus convallis vehicula tincidunt eget augue. Vestibulum fringilla condimentum fringilla. Maecenas congue hendrerit nunc eu maximus. Pellentesque et ullamcorper velit, ut volutpat sem. Vivamus quis tristique metus. In vitae tellus suscipit, dapibus tellus eu, elementum lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Ut sed consectetur purus. Aenean placerat porttitor rutrum. Nam quam elit, mollis non neque vel, cursus sodales tellus. Nulla ac nisi nec quam dictum dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi rhoncus rhoncus eros, sed bibendum nisi placerat tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce id risus congue, faucibus dui et, hendrerit augue. Fusce eu mauris orci. Maecenas efficitur sit amet neque non lobortis. Vivamus dictum tincidunt condimentum. Proin in lacinia purus, id dictum metus.

Maecenas accumsan quam urna, vel varius purus vestibulum non. Aenean egestas metus at fermentum ultrices. Curabitur ante mi, vulputate eu malesuada sit amet, semper eu arcu. Proin venenatis, neque ut fringilla vestibulum, nulla lorem molestie arcu, ut commodo tellus ipsum sit amet nisi. Maecenas quis faucibus risus, sit amet finibus nulla. In hac habitasse platea dictumst. Pellentesque dui elit, blandit vitae placerat ut, volutpat nec nibh. Proin ultricies pharetra mauris non volutpat.

Etiam varius lacus sed turpis sodales venenatis. Integer ut enim aliquam, sodales nibh vitae, porttitor lacus. Pellentesque eleifend tempus egestas. Maecenas sodales vestibulum lectus non aliquet. Sed pulvinar vulputate justo. Ut condimentum pretium congue. Ut congue mauris enim, eu consequat tellus gravida vulputate. Duis cursus velit est, vel placerat justo tristique eget. Integer sagittis ut ante ut eleifend. Duis in felis quis eros pretium sollicitudin sed ut sapien. Ut porta ipsum lorem, at euismod erat gravida ut. Curabitur molestie massa sed est iaculis accumsan. Fusce consectetur, leo ac gravida sollicitudin, nulla felis vestibulum nibh, quis finibus enim dolor ac nulla. Etiam vel egestas diam. 
</div>

CSS

div {
    overflow: scroll;
    float: left;
    text-align: justify;
}
#div1 {
    height : 300px;
    width: 200px;
}
#div2 {
    height : 600px;
    width: 200px;
    margin-left: 18px;
}

Javascript

var $divs = $('#div2');
var lastS = 0;
var thisS = 0;
var sync = function(e){
    var other = document.getElementById('div1');
    lastS = thisS;
    thisS = this.scrollTop;
    other.scrollTop += thisS - lastS;
}
$divs.on( 'scroll', sync);

http://jsfiddle.net/admzmdzm/

Scrollable Sidebar When Scrolling Main Content Div

2 Answers2