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

Question

我试图复制wired.com上使用的sibebar滚动，但还没有运气：/

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

我注意到的几件事-

1. 侧边栏根据内容（可以是大图或广告）动态改变高度，比中间部分的内容更宽

2. 然后它被该内容推高。

3. 在全部向上移动之后，侧边栏会再次出现并一直停留，直到它与任何此类内容接触。

   我检查了来源，似乎侧边栏正在寻找更广泛内容的高度并与之匹配，然后是下一个，最后是 100%

PS - 我是网络开发的新手，任何帮助将不胜感激:)，谢谢：

标签： javascriptjqueryfrontendsidebarsticky

Answer 1

这就是我尝试过的

        $(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() );
});