Scroll detection of the navigation bar enables the navigation bar to slide and fix with no content

We often see the content of some websites decline , The navigation bar is fixed at the top , How is such a function realized ?

I am here vue The implementation of the
stay vue Paste the following code into the hook function of ,
Then we add one on the tab of our navigation bar id = "inner" Properties of

mounted() {
      // The navigation bar scrolls with the page to detect 
      //  In the page nav Tag plus id="inner" This is an attribute 
      let obj11 = document.getElementById("inner");
      let top11 = getTop(obj11);
      let isIE6 = /msie 6/i.test(navigator.userAgent);
      window.onscroll = function () {
        let bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if (bodyScrollTop > top11) {
          obj11.style.position = (isIE6) ? "absolute" : "fixed";
          obj11.style.top = (isIE6) ? bodyScrollTop + "px" : "0px";
          obj11.style.zIndex = (isIE6) ? "-1" : "1";
        } else {
          obj11.style.position = "static";
        }
      }

      function getTop(e) {
        let offset = e.offsetTop;
        if (e.offsetParent != null) offset += getTop(e.offsetParent);
        return offset;
      }
   }

The effect is as follows :