not working when window is not scrollable

[mallochine]

Using the wrong offset.

My situation:

• using the table's div tag as the scrollableArea because window was not the one being scrolled
• led to bug where offsetTop was always 0. Because it was pulling from window's offset, not the scrollableArea's offset
• fixed it using the following hack:

    base.toggleHeaders = function () {
      if (base.$el) {
        base.$el.each(function () {
          var $this = $(this),
            newLeft,
            newTopOffset = base.isWindowScrolling ? (
                  isNaN(base.options.fixedOffset) ?
                  $(base.options.fixedOffset).outerHeight() :
                  base.options.fixedOffset
                ) :
                base.$scrollableArea.offset().top +
                (!isNaN(base.options.fixedOffset) ?
                    base.options.fixedOffset : 0),
            offset = $this.offset(),

            scrollTop = base.$scrollableArea.scrollTop() + newTopOffset,
            scrollLeft = base.$scrollableArea.scrollLeft(),

            scrolledPastTop = base.isWindowScrolling ?
                scrollTop > offset.top :
                newTopOffset > offset.top,
            notScrolledPastBottom = (base.isWindowScrolling ? scrollTop : 0) <
                (offset.top + $this.height() - base.$clonedHeader.height() - (base.isWindowScrolling ? 0 : newTopOffset));

          //===============================================================
          //===
          // Hack to fix the bug.
          newTopOffset = scrollTop;
          //===
          //===============================================================

          if (scrolledPastTop && notScrolledPastBottom) {
            newLeft = offset.left - scrollLeft + base.options.leftOffset;
            base.$originalHeader.css({
              'position': 'fixed',
              'margin-top': 0,
              'left': newLeft,
              'z-index': 1 // #18: opacity bug
            });
            base.leftOffset = newLeft;
            base.topOffset = newTopOffset;
            base.$clonedHeader.css('display', '');
            if (!base.isSticky) {
              base.isSticky = true;
              // make sure the width is correct: the user might have resized the browser while in static mode
              base.updateWidth();
            }
            base.setPositionValues();
          } else if (base.isSticky) {
            base.$originalHeader.css('position', 'static');
            base.$clonedHeader.css('display', 'none');
            base.isSticky = false;
            base.resetWidth($('td,th', base.$clonedHeader), $('td,th', base.$originalHeader));
          }
        });
      }
    };

[jmosbech]

Cool. I'm swamped with work currently, but will investigate as soon as possible.

[mallochine]

Sure. For the order in which you should check, I would recommend you first check the other issue I filed https://github.com/jmosbech/StickyTableHeaders/issues/64#issuecomment-51817120 since I understand that issue more clearly.

[RoyArgaez]

Jonas Good afternoon, I have a project in Yii and I'm using an extension called "multimodelform" and installed your jQuery "StickyTableHeaders" but when setting the header, is outside the div. I hope not to ask the wrong place, yet would attach a picture so you understand my problem.

And This

how i can fix it? I hope you can help me with the problem beforehand, thanks

[mallochine]

@RoyArgaez does the my proposed hack help solve your problem?

[arfordweb]

@RoyArgaez The problem you're having looks more like it falls under this issue: https://github.com/jmosbech/StickyTableHeaders/issues/106

I added some suggestions to that issue.