Fixed python website double scroller and improve UX (apache#18845)

* make python site header scroll aware and avoid double scroller

* add compiled assets

* adjust python site second header height

* add new line

* set focus to main content on DOM load

docs/python_docs/_static/mxnet.css

@@ -49,7 +49,7 @@
 }
 
 .mdl-layout__header-row {
-    height: 84px !important;
+    height: 80px !important;
 }
 
 .mdl-shadow--2dp {
@@ -199,4 +199,8 @@ p {
     float: right;
     margin: 4px;
     cursor: pointer;
-}
+}
+
+.scrollUp {
+    transform: translateY(-80px);
+}

docs/python_docs/themes/mx-theme/src/js/sphinx_materialdesign_theme.js

@@ -172,4 +172,22 @@ $(function() {
 
     $('.mdl-layout').css('visibility', 'visible');
 
+    const addScrollAwareHeaderAnimation = function() {
+        let preScrollTop, curScrollTop = 0;
+        const scrollContent = $("main.mdl-layout__content");
+        scrollContent.focus();
+        const navBar = $('header.mdl-layout__header');
+        const navBarHeight = navBar.height();
+
+        scrollContent.scroll(function () {
+            curScrollTop = scrollContent.scrollTop();
+            if (preScrollTop < curScrollTop && curScrollTop > navBarHeight) {
+                navBar.addClass("scrollUp");
+            } else if (preScrollTop > curScrollTop && !(curScrollTop <= navBarHeight)) {
+                navBar.removeClass("scrollUp");
+            }
+            preScrollTop = curScrollTop;
+        });
+    }
+    addScrollAwareHeaderAnimation();
 });

docs/python_docs/themes/mx-theme/src/scss/_root.scss

@@ -18,6 +18,14 @@ body {
     display: none;
 }
 
+.mdl-layout__container {
+    height: calc(100% - 76px);
+    margin-top: 76px;
+}
+.mdl-layout__header {
+    position: fixed;
+    transition: transform 0.5s;
+}
 .mdl-layout--fixed-drawer>.mdl-layout__content {
     margin-left: 300px;    
 }

docs/python_docs/themes/mx-theme/src/scss/layout/_layout.scss

@@ -25,14 +25,9 @@
     )
 );
 
-.mdl-layout {
-    margin-top: 76px;
-}
-
-
 .document {
     width: 100%;
-    margin: 0 auto;
+    margin: 84px auto;
     display: flex;
 
     @media (min-width: $xl-breakpoint) {