Set sidebar height equal with content on scroll

Question

sometimes my content div's height is greater than sidebar height and its not good looking.

I want to do if content height is greater than sidebar, on page scroll add margin-top to sidebar until bottom of the content

I tried to do that with this code:

var sidebar = $("#sidebar").outerHeight();
var content = $("#content-left").outerHeight();
var gap = (content - sidebar);
$(window).scroll(function() {
if ($(this).scrollTop() > gap) { 
if (content > sidebar ) {
$("#sidebar").css('margin-top', +gap);
}}}); 

But it is not actually what I want to do. I want if user scrolled 20px, add 20px margin until bottom of the content.

If there is more easy and good way to do this, please let me know.

Thanks for help!

UPDATE:

Here is my #content-left css : #content-left { float: left;width: 68%;}

and #sidebar css :

float: right;
width: 30%;
height: auto;
padding: 0;
margin-top: 0px;
margin-bottom: 15px;
overflow: hidden;

Answer 1

I decided to improve the answer (after it was accepted). Now I have created a function, which will handle positioning of the div. You can run it on scrolling, window resizing, etc. I figured this would be very useful in case anyone wanted to use this code.

Just change the variables:

• contentHeight
• sidebarHeight
• contentOffset

And you're all done :).

Suggestions on further improvements on this are always welcome.

JS-Fiddle

JS-Fiddle

html

<header>
<h1>"The sticking sidebar"</h1>
</header>
<div id="content"><p>START<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.<br/>END</p></div>
<div id="sidebar"><p>START<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.<br/>END</p></div>
<footer><i>footer</i></footer>

css

header h1{
  text-align: center;
}
#content{
  float: left;
  width: 70%;
  background-color: rgb(150, 150, 0)
}
#sidebar{
  position: relative;
  width: 30%;
  float: right;
  background-color: yellow;
}

js/jQuery

  $(document).ready(function(){
  // define variables before scrollin to destress the processor
  let contentHeight = $("#content").height();
  let sidebarHeight = $("#sidebar").height();
  let windowHeight = $(window).height();
  let doc = $(document); 
  let contentOffset = $("#content").offset().top;

  $(window).resize(function(){
    //should reset all variables here or the code will bug out on screen resizing 
  contentHeight = $("#content").height();;
  sidebarHeight = $("#sidebar").height();
  windowHeight = $(window).height();
  contentOffset = $("#content").offset().top;
  determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight,windowHeight);
  });
  $(document).scroll(function(){
            determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight, windowHeight);
  }); // end scroll
});//end ready

function determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight, windowHeight){ 
    //only run if the #sidebar is higher than the #content
  if(contentHeight>sidebarHeight){
    var scrollTop = doc.scrollTop();
    //check if variable has been previously created by this function else the value is 0
    let oldScrollTop = (window.oldScrollTop)?window.oldScrollTop:0;
    //create a marginTop var if it doesn t exist yet
    window.marginTop = (window.marginTop)?marginTop:0;
    //determine if you scroll up op down
    let isScrollingDown = (scrollTop>oldScrollTop)?true:false;
    //if the end of the sidebar reaches the end of the window change margin so it "sticks". It should stick until the #sidebar reaches the same height (inculding margin) as the #content.
    if(isScrollingDown && scrollTop+windowHeight > contentOffset + sidebarHeight + marginTop){
    marginTop = scrollTop + windowHeight-sidebarHeight-contentOffset;
    // check if content would be too long, if so set the maximum marginTop
    if(marginTop>contentHeight-sidebarHeight){
        marginTop = contentHeight-sidebarHeight;
      }
    }    
    // if the start of the sidebar reaches the top while scrolling up, make it "stick"
        else if(!isScrollingDown && scrollTop < contentOffset + marginTop){
        marginTop = scrollTop - contentOffset;
      // make sure margin-top cannot go negative
      if(marginTop<0){
        marginTop = 0;
      }
    }
    //change the margin
    $("#sidebar").css({'margin-top': marginTop});
  }
  window.oldScrollTop = scrollTop;
}

Answer 2

You can use flex, and ditch the javascript. I've written a quick example for you below.

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
}

.sidebar {
  min-height: 100vh;
  width: 20%;
  background: pink;
}

.content {
  min-height: 100vh;
  width: 80%;
  background: blue;
}

<div class="container">
  <div class="sidebar"></div>
  <div class="content"></div>
</div>