javascript - 在带滚动条的 div 内滚动侧边栏 - $(window).on ('scroll' ， function()？

Question

我希望我的社交侧边栏仅在灰色 div 内滚动。我已经将侧边栏放在灰色div内，不超过页脚或上面的内容。我的困难是侧边栏滚动伴随滚动而不变成灰色 div。

http://test.eae.pt/beautyacademy/angebot/

JS:

beautyAcademy.sharer = {
element: void 0,
elementToScroll: void 0,
init:function() {
    this.element = $('.js-sharer-ref');
    console.log(this.element.length);
    if(this.element.length != 1) {
        return;
    }
    this.build();
},
build: function() {
    this.binds();
},
binds: function() {
    var _this = this;
    // Element that's gonna scroll
    this.$elementToScroll = $('.fixed-social');

    // Element that's gonna scroll height
    this.elementToScrollHeight = this.$elementToScroll.outerHeight();

    // Element where scroll is gonna happen Height
    this.elementHeight = this.element.outerHeight();

    // Element where scroll is gonna happen distance to top
    this.elementOffsetTop = this.element.offset().top;

    // Scroll that was done on the page
    this.windowScrollTop = $(window).scrollTop();

    this.elementOffsetBottom = this.elementOffsetTop + this.elementHeight - this.elementToScrollHeight;

    this.$elementToScroll.css('top', (_this.elementOffsetTop+80) + "px");

    $(window).on('scroll', function() {
       if(this.windowScrollTop +  this.elementToScrollHeight < this.elementHeight  )
           this.$elementToScroll.css('margin-top',  this.windowScrollTop );
    });
}
};

Answer 1

您需要尝试如下:

 $(function(){
   if ($('#container').length) {
      var el = $('#container');
      var stickyTop = $('#container').offset().top; // returns number
      var stickyHeight = $('#container').height();

      $(window).scroll(function(){ // scroll event
          var limit = $('#footer').offset().top - stickyHeight - 20;

          var windowTop = $(window).scrollTop(); // returns number

          if (stickyTop < windowTop){
             el.css({ position: 'fixed', top: 0 });
          }
          else {
             el.css('position','static');
          }

          if (limit < windowTop) {
          var diff = limit - windowTop;
          el.css({top: diff});
          }
        });
   }
});

DEMO