Fix position when relative element become smaller

[simonbrunel]

Reset the affix position when the relative element height become smaller than the affix container and thus should be positioned on top. This case happens, for example, when the relative element contains dynamic (router) views and the affix element is on the side and acts similarly to vertical tabs.

@eddiemf I haven't been able to setup a jsfiddle to showcase that issue: it happens in a private project where the affix container is a side menu that changes the current route. The relative element contains a <router-view> and in some cases the current page has a smaller height than the affix element. With current version (v0.2.4), the affix element stay blocked to its last affixed position.

[zamarawka]

@eddiemf actual pr for last updates.
I got this issue on refactored version.

[eddiemf]

Thanks for the help :)

[simonbrunel]

Actually, I think my change introduces another issue: when the element is hidden, this.relativeElement.offsetHeight === 0 and in that case we should not change the current state. What do you think about adding a check on this.relativeElement.offsetParent?

// ...
if (affixIsBiggerThanRelativeElement) {
  if (this.relativeElement.offsetParent) {
    if (this.scrollAffix && this.currentScrollAffix !== 'scrollaffix-top') {
      this.setScrollAffixTop();
    } else if (this.currentState !== 'affix-top') {
      this.setAffixTop();
    }
  }

  return;
}
// ...

or maybe that check should be on the overall affix logic:

onScroll() {
   //...
  this.updateData();

  if (!this.relativeElement.offsetParent) {
     // relative element not displayed
     return;
  }

  const affixIsBiggerThanRelativeElement = ...
  // ...
}