hide footer after a few seconds when it is scrolled to

Author: aireilly

_stylesheets/docs.css

@@ -527,8 +527,6 @@ h2:hover>a.anchor, h2>a.anchor:hover, h3:hover>a.anchor, h3>a.anchor:hover, h4:h
     background-color: #000;
     padding: 0px 0;
     z-index: 5;
-    transition: transform 0.5s ease-out;
-    transform: translateY(0);
   }
 
   .close-btn-sm {

_templates/_page_openshift.html.erb

@@ -20,7 +20,7 @@
   <link href="https://assets.openshift.net/content/subdomain/touch-icon-precomposed.png" rel="apple-touch-icon-precomposed" type="image/png"/>
   <link href="https://assets.openshift.net/content/subdomain/favicon32x32.png" rel="shortcut icon" type="text/css"/>
   <link href="https://assets.openshift.net/content/osh-nav-footer.css" rel="stylesheet" type="text/css" media="screen"/>
-  <link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/docs.css" rel="stylesheet"  media="screen"/>
+  <link href="https://file.emea.redhat.com/aireilly/add-footer-transition/_stylesheets/docs.css" rel="stylesheet"  media="screen"/>
   <link href="https://docs.openshift.com/container-platform/4.1/_stylesheets/print.css" rel="stylesheet" type="text/css" media="print"/>
   <!--[if IE]><link rel="shortcut icon" href="https://assets.openshift.net/content/subdomain/favicon.ico"><![endif]-->
   <!-- or, set /favicon.ico for IE10 win -->
@@ -717,64 +717,6 @@
       })
   </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')
-
-    //handle short pages
-    if (window.innerHeight === document.documentElement.scrollHeight) {
-      //sidebar
-      if (sidebar !== null && okd_footer == null) {
-        sidebar.style.marginBottom = "38px";
-        main.style.marginBottom = "35px";
-      };
-      //okd sidebar
-      if(sidebar !== null && okd_footer !== null) {
-        sidebar.style.marginBottom = "176px";
-        main.style.marginBottom = "135px";
-      }
-    };
-
-    //handle scrolling pages
-    document.addEventListener('scroll', () => {
-      //scroll to bottom
-      if ($(window).width() >= 1008) {
-        if(sidebar !== null) {
-          //pages with multiple toc entries
-          if(document.documentElement.scrollHeight === window.pageYOffset + window.innerHeight) {
-              //sidebar
-              if (sidebar !== null && okd_footer == null){
-                sidebar.style.marginBottom = "38px";
-                main.style.marginBottom = "35px";
-              };
-              //toc
-              if (toc !== null && okd_footer == null){
-                toc.style.bottom = "35px";
-              };
-              //okd sidebar
-              if(sidebar !== null && okd_footer !== null) {
-                sidebar.style.marginBottom = "176px";
-                main.style.marginBottom = "135px";
-              };
-              //okd toc
-              if (toc !== null && okd_footer !== null){
-                toc.style.bottom = "175px";
-              };
-            };
-          if(document.documentElement.scrollHeight != window.pageYOffset + window.innerHeight) {
-            sidebar.style.marginBottom = "0px";
-            if (toc !== null) {
-              toc.style.bottom = "0px";
-            }
-          }
-        }
-      }
-    })
-  </script>
-
   <!-- adjust alerts on mobile -->
   <script type="text/javascript">
     alert = document.querySelector('#support-alert')
@@ -805,15 +747,17 @@
 
   <!-- hide footer after 3 seconds -->
   <script type="text/javascript">
-    const bottomVisible = () => document.documentElement.clientHeight + window.scrollY >= (document.documentElement.scrollHeight || document.documentElement.clientHeight);
-
-    if (bottomVisible()) {
-      setTimeout(() => {
-        document.querySelector('footer#rh').classList.add('hide-footer');
-      }, 3000);
-    } else {
-      document.querySelector('footer#rh').classList.remove('hide-footer');
-    }
+    const hideFooter = () => {
+        document.querySelector('footer#rh').style.display = "none";
+      };
+
+    window.addEventListener('scroll', function() {
+      if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+        setTimeout(hideFooter, 3000);
+      } else {
+        document.querySelector('footer#rh').style.display = "block";
+      }
+    })
   </script>
 </body>
 </html>