how to get sidebar scrolling like wired website?

问题: 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-nowh...

问题:

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%

enter image description here

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


回答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() );
});
  • 发表于 2018-07-05 12:03
  • 阅读 ( 279 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除