如何使侧边栏像有线网站一样滚动？

Question

i have tried to replicate the sibebar scrolling used on wired.com but no luck yet :/

link - https://www.wired.com/story/the-bike-share-war-is-shaking-up-seattle-like-nowhere-else/

few things i have noticed-

1. the sidebar changes height dynamically depending on the content(can be a big picture or an ad) which is wider than the content in the middle portion
2. then it gets pushed up by that content.

3. After all have moved up, the sidebar appears again and sticks until it comes in contact with any such content.

   i checked the source and it seems the sidebar is finding the height of the wider content and matching to it , and then the next , and in the last its 100%

PS - i am new to web development and any help would be immensely appreciated :) , thanks:

Answer 1

this is what i have tried

        $(function(){
    var d = $('#sidebar');
    var dPosTop = d.offset().top;
    var win = $(window);
    win.scroll(function(e){
        var scrollTop = win.scrollTop();
        if(scrollTop >= dPosTop){
          d.fadeIn(500);
        }
      else{
        d.fadeOut(200);
      }
    });

});


$(document).ready(function(){
$("#sidebar").height( $("#content").height() );
});