anchor.diff:  
     <!-- update active toc class when mouse scrolls -->
     <script type="text/javascript">
  -    window.addEventListener("wheel", () => {
  -
  -      const ioConfiguration = {
  -        "rootMargin": "-120px 0px -400px 0px",
  -        "threshold": 0
  -      };
  -
  -      const observer = new IntersectionObserver(setCurrent, ioConfiguration, entries => {
  -        entries.forEach(entry => {
  -          var id = entry.target.getAttribute('id');
  -          //fight with js
  -          document.querySelector(`#toc li a[href="#${id}"]`).classList.remove('toc-active');
  +    window.addEventListener('DOMContentLoaded', () => {
  +      window.addEventListener("wheel", () => {
  +        
  +        const ioConfiguration = {
  +          "rootMargin": "-120px 0px -400px 0px",
  +          "threshold": 0
  +        };
  +
  +        const observer = new IntersectionObserver(setCurrent, ioConfiguration, entries => {
  +          entries.forEach(entry => {
  +            var id = entry.target.getAttribute('id');
  +            //fight with js
  +            document.querySelector(`#toc li a[href="#${id}"]`).classList.remove('toc-active');
  +          });
           });
  -      });
  -
  -      //track all h1-4 headings that have an id
  -      document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
  -        observer.observe(h);
  -      });
  -
  -      //runs when the IntersectionObserver fires
  -      function setCurrent(e) {
  -        var allTocLinks = document.querySelectorAll("#toc li a");
  -        e.map(i => {
  -          if (i.isIntersecting && i.intersectionRatio >= 1) {
  -            allTocLinks.forEach(link => link.classList.remove("toc-active"));
  -            toc_item = document.querySelector(`#toc li a[href="#${i.target.id}"]`)
  -            if(toc_item !== null) toc_item.classList.add('toc-active'); 
  +
  +        //track all h1-4 headings that have an id
  +        document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
  +          observer.observe(h);
  +        });
  +
  +        //runs when the IntersectionObserver fires
  +        function setCurrent(e) {
  +          var allTocLinks = document.querySelectorAll("#toc li a");
  +          if (allTocLinks !== undefined) {
  +            e.map(i => {
  +              if (i.isIntersecting && i.intersectionRatio >= 1) {
  +                allTocLinks.forEach(link => link.classList.remove("toc-active"));
  +                document.querySelector(`#toc li a[href="#${i.target.id}"]`).classList.add('toc-active')
  +              }
  +            })
  +          } 
  +        };
  +
  +        //make clicked toc item active and stop IntersectionObserver
  +        $("#toc a").click(function() {
  +          //stop tracking all h1-4 headings that have an id
  +          document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
  +            observer.unobserve(h);
  +          });
  +          var tocItems = $("#toc a");
  +          if (tocItems !== undefined) {
  +            for (let i = 0; i < tocItems.length; i++) {
  +              tocItems[i].classList.remove("toc-active");
  +            };
  +            this.classList.add("toc-active");
             }
  -        });
  -      };
  -
  -      //make clicked toc item active and stop IntersectionObserver
  -      $("#toc a").click(function() {
  -        //stop tracking all h1-4 headings that have an id
  -        document.querySelectorAll('.main h2[id], .main h3[id]').forEach((h) => {
  -          observer.unobserve(h);
  -        });
  -        toc_items = document.querySelectorAll('#toc a')
  -        for (let i = 0; i < toc_items.length; i++) {
  -          toc_items[i].classList.remove("toc-active");
  -        }
  -        this.classList.add("toc-active");
  +        })
         })
       })
     </script>
   
     <!--handle page scroll top and bottom, add toc-active -->
     <script type="text/javascript">
  -    toc_items = document.querySelectorAll('#toc a')
       document.addEventListener('scroll', () => {
         //scroll to bottom
         if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
  -        if(toc_items !== null) {
  -          for (let i = 0; i < toc_items.length; i++) {
  -            toc_items[i].classList.remove("toc-active")
  -            };
  -            toc_items[toc_items.length - 1].classList.add("toc-active");
  -          }
  +        var tocItems = $("#toc a");
  +        for (let i = 0; i < tocItems.length; i++) {
  +          tocItems[i].classList.remove("toc-active")
  +          };
  +          tocItems[tocItems.length - 1].classList.add("toc-active");
           };
         //scroll to top
         if(window.pageYOffset === 0) {
  -        for (let i = 0; i < toc_items.length; i++) {
  -          if(toc_items !== null) {
  -            toc_items[i].classList.remove("toc-active");
  +        var tocItems = $("#toc a");
  +        for (let i = 0; i < tocItems.length; i++) {
  +          tocItems[i].classList.remove("toc-active");
             };
  -          toc_items[0].classList.add("toc-active");
  +          tocItems[0].classList.add("toc-active");
  +        };
  +      })
  +  </script>
  +
  +  <!--adjust sidebar and toc when footer is displayed -->
  +  <script type="text/javascript">
  +    sidebar = document.querySelector('.sidebar')
  +    toc = document.querySelector('#toc')
  +    main = document.querySelector('.main')
  +    okd_footer = document.querySelector('.footer-origin-docs')
  +    document.addEventListener('scroll', () => {
  +      //scroll to bottom
  +      if (window.innerWidth >= 1425) {
  +        if(sidebar !== null && toc !== null) {
  +          if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
  +              sidebar.style.marginBottom = "38px";
  +              toc.style.bottom = "35px";
  +              main.style.marginBottom = "35px";
  +              //okd footer
  +              if(okd_footer !== null) {
  +                sidebar.style.marginBottom = "176px";
  +                toc.style.bottom = "175px";
  +                main.style.marginBottom = "135px";
  +              };
  +            };
  +          if(document.documentElement.scrollHeight != window.pageYOffset + window.innerHeight) {
  +            sidebar.style.marginBottom = "0px"; 
  +            toc.style.bottom = "0px";
  +          }
           }
  -      };
  +      }
       })
     </script>
   
     <!-- adjust alerts on mobile -->
     <script type="text/javascript">
  -    alert_item = document.querySelector('#support-alert')
  +    alert = document.querySelector('#support-alert')
       window.addEventListener("wheel", () => {
         if (window.innerWidth < 1425) {
           //adjust alert
           if(window.pageYOffset > 0) {
  -            if(alert_item !== null) {
  -              alert_item.style.position = "fixed";
  -              alert_item.style.bottom = "0px";
  -              alert_item.style.margin = "5px";
  -              alert_item.style.zIndex = "9999999";
  -            }
  +          if(alert !== null) {
  +            document.querySelector('#support-alert').style.position = "fixed";
  +            document.querySelector('#support-alert').style.bottom = "0px";
  +            document.querySelector('#support-alert').style.margin = "5px";
  +            document.querySelector('#support-alert').style.zIndex = "9999999"; 
  +          }    
           }
         }
      });
       window.addEventListener('resize', () => {
         if (window.innerWidth >= 1425) {
  -        if(alert_item !== null) {
  -          alert_item.style.removeProperty('position');
  -          alert_item.style.removeProperty('bottom');
  -          alert_item.style.removeProperty('margin');
  -          alert_item.style.removeProperty('zIndex');
  +        if(alert !== null) {
  +          document.querySelector('#support-alert').style.removeProperty('position');
  +          document.querySelector('#support-alert').style.removeProperty('bottom');
  +          document.querySelector('#support-alert').style.removeProperty('margin');
  +          document.querySelector('#support-alert').style.removeProperty('zIndex');          
           }
         }
       })
  
positive.code:   <!-- remove toc active class when page is loaded -->
    <script type="text/javascript">
      window.addEventListener('DOMContentLoaded', () => {
        toc_items = document.querySelectorAll('#toc a')
  
        for (let i = 0; i < toc_items.length; i++) {
          toc_items[i].classList.remove("toc-active");
        }
      })
    </script>
  
negative.code:   <!-- clear and add toc-active to clicked toc link -->
    <script type="text/javascript">
    $("#toc a").click(function() {
      var tocItems = $("#toc a");
      for (let i = 0; i < tocItems.length; i++) {
        tocItems[i].classList.remove("toc-active");
      }
      this.classList.add("toc-active");
    });
  