How to make sticky elements in meteor

Question

I would like to make a sticky element using meteor, where the element would scroll until it reaches the top of the page, in which case it would remain there.

Specifically, I would like a "two stage" navbar with the first part disappearing as one scrolls down leaving the lower part fixed on the top of the page.

I couldn't find anywhere how to handle this on meteor and it appears here that you cannot use window scroll events.

I have tried a combination of the approaches here and here (cf edit below) but couldn't make it work!

Could anyone please help me out or give any pointers on how to go about implementing this in meteor?

EDIT

Here is an example of the sort of things I was trying if that helps, but it is so broken the page won't even load!

layout.html:

<template name="layout">

  <div class="banner">
      <!-- A full strip of text/logos ect -->
  </div>

 <div class ="headerAnchor"></div>

 <header id="header" class="relative">
     <!-- The navbar with all the links-->
 </header>

</template>

layout.js:

Template.layout.onRendered(function(){
  this.$anchor =$("#headerAnchor");
  this.$header = $("#header");

  this.navBarScrollHandler=function(){
   let st=$(window).scrollTop();
   let ot=this.$anchor.offset().top;
   if(st>ot){
     this.$header.removeClass(relative).addClass(fixed-on-top);
   }else if(st<=ot){
     this.$header.removeClass(fixed-on-top).addClass(relative);
   }
  }.bind(this);

  $window.on("scroll",this.navBarScrollHandler);

 });

Template.layout.onDestroyed(function(){
   $(window).off("scroll", this.scrollHandler);
});

main.css:

.fixed-on-top{
  position:fixed;
  top:0px;
 }  

.relative{
  position:relative !important;
 }

PS: What I would like is for header to have a relative position until banner is out of the page, then for header to be fixed on top unless you scroll all the way up again in which case banner would reappear.