use css position: sticky

[Robert King]

FYI, I was able to replace this:

<div #boundary>
  <!-- margin-top 80 for 80px sticky nav menu -->
  <app-ad-mrec-half-page
    stickyThing
    marginTop="80"
    [boundary]="boundary">
  </app-ad-mrec-half-page>
</div>

with this:

:host {
  display: grid;
  grid-template-rows: 1fr;
  div {
    div {
      position: sticky;
      top: 80px;
    }
  }
}

<div>
  <div>
    <app-ad-mrec-half-page></app-ad-mrec-half-page>
  </div>
</div>

[stefanseeger]

Hello,
actually when you are using position:sticky you can simply scrap all this code.
Because it is doing the same thing just native by the browser.
But be aware that it is not supported by Internet Explorer before Edge.

[JohannesW11K]

position: sticky does the job quite well. But as mentioned the Browser-support isn't the best and polyfills would need javascript aswell anyways.

[stefanseeger]

Just one final comment because of completeness. To make it also work on Safari, you will need to use the vendor prefix in css.

position: -webkit-sticky; /* Safari */
position: sticky;