v1.x website patch (#19192)

* Fixed Install page history broken (#18182) * fix install option block history broke * when history goes back, avoid button default css blue outline * use appropriate parameter name * format scss change * Update website version select drop down (#18188) * update version select drop down * align caret * revert scrollable content, add delayed hover effect * bugfix * fix new design doesn't work on mobile # Conflicts: # docs/static_site/src/_includes/get_started/get_started.html * Update website version select drop down (#18188) * update version select drop down * align caret * revert scrollable content, add delayed hover effect * bugfix * fix new design doesn't work on mobile # Conflicts: # docs/static_site/src/_includes/get_started/get_started.html * Fix gluon link missing (#18243) * fix gluon link missing * empty commit to trigger checks * empty commit to trigger checks * fix when clicking version dropdown it jumps to top of the page (#18238) * Website global search feature (#18288) * init global search ui * add hover effect to icon and refactor js * add search bar ui styles * fix search UI's effect on navbar height * add fade in/out effect to search ui and navbar * update search trigger to click and add x button for close * add version select for search * fix version typo * update dropdown * fix hitsperpage reset after change version * fix nav trigger not show * update search border css class name * make dropdown style consistent * global search mobile&tablet UI * adjust mobile search result width * extract global search related styles to a seperate scss * restore formatting to existing code * format & coding style * fix caret height bug * add mobile compatible UI * add license header to js files and update dropdown width * put docsearch css before main to overrides * update search result panel height * dynamically generate version dropdown * use more accurate selector over search result * use vh for height * add comments to scss * move versions to Jekyll global variable * remove redundant version key * make global search default version the same as website version Co-authored-by: Yang Shi <[email protected]> * replace google CDN with JQuery's own CDN (#18369) Co-authored-by: Yang Shi <[email protected]> * Add Developer Guide Docs to MXNet Website (#18474) * init dev guide * move dev guide above FAQ * update format and images * hoist git docs and fix styles * use relative urls * remove useless code block * use consistent url and file name * update heading * add apache license header * init dev guide * move dev guide above FAQ * update format and images * hoist git docs and fix styles * use relative urls * remove useless code block * use consistent url and file name * update heading * add apache license header * update doc - git clone recursive * reviewing the dev guide - proof reading and text edits Co-authored-by: Yang Shi <[email protected]> Co-authored-by: Talia Chopra <[email protected]> * fix contribute page anchor position shifted (#18571) Co-authored-by: Yang Shi <[email protected]> * Clipboard refactor (#18605) * refactor clipboard * make lang getter more extensible * trigger ci * User Feedback Widget (#18639) * user feedback widget implementation * add user feedback widget to python docs site * update margin * add apache license * one more license * turn off feedback widget on python site * update copy * format * add event value field * turn on widget on Python site # Conflicts: # docs/static_site/src/_includes/head.html # docs/static_site/src/assets/main.scss * Fix python micro-site table of content bugs (#18664) * update footer style * add compiled css of footer styles changes * add same style for footer2 * more fix to the toc * Fix all anchor shifts on website (#18674) * use regex that is supported by all browsers (#18811) * 1.7 compatible fix * add jquery fix * Consolidate installation instructions on website and add disclaimer for non-ASF ressources (#18487) * Update website with disclaimer for non-ASF ressources * Integrate Windows instructions to build_from_source.md * Remove master version from selector * Update Download links * Update get_started/download.md per Release Download Page policy # Conflicts: # contrib/clojure-package/README.md # docs/python_docs/python/tutorials/deploy/inference/image_classification_jetson.md # docs/static_site/src/_includes/get_started/get_started.html # docs/static_site/src/_includes/get_started/linux/clojure/gpu.md # docs/static_site/src/_includes/get_started/linux/java/gpu.md # docs/static_site/src/_includes/get_started/linux/julia/build-from-source.md # docs/static_site/src/_includes/get_started/linux/perl/perl.md # docs/static_site/src/_includes/get_started/linux/python/cpu/build-from-source.md # docs/static_site/src/_includes/get_started/linux/python/cpu/docker.md # docs/static_site/src/_includes/get_started/linux/python/cpu/pip.md # docs/static_site/src/_includes/get_started/linux/python/gpu/build-from-source.md # docs/static_site/src/_includes/get_started/linux/python/gpu/docker.md # docs/static_site/src/_includes/get_started/linux/python/gpu/pip.md # docs/static_site/src/_includes/get_started/linux/r/gpu.md # docs/static_site/src/_includes/get_started/linux/scala/cpu.md # docs/static_site/src/_includes/get_started/linux/scala/gpu.md # docs/static_site/src/_includes/get_started/macos # docs/static_site/src/_includes/get_started/macos/clojure/cpu.md # docs/static_site/src/_includes/get_started/macos/julia/build-from-source.md # docs/static_site/src/_includes/get_started/macos/perl/perl.md # docs/static_site/src/_includes/get_started/macos/python/cpu/build-from-source.md # docs/static_site/src/_includes/get_started/macos/python/cpu/docker.md # docs/static_site/src/_includes/get_started/macos/python/cpu/pip.md # docs/static_site/src/_includes/get_started/macos/python/gpu/build-from-source.md # docs/static_site/src/_includes/get_started/macos/python/gpu/pip_docker.md # docs/static_site/src/_includes/get_started/macos/r/cpu.md # docs/static_site/src/_includes/get_started/macos/scala/cpu.md # docs/static_site/src/_includes/get_started/windows # docs/static_site/src/_includes/get_started/windows/perl/perl.md # docs/static_site/src/_includes/get_started/windows/python/cpu/build-from-source.md # docs/static_site/src/_includes/get_started/windows/python/cpu/docker.md # docs/static_site/src/_includes/get_started/windows/python/cpu/pip.md # docs/static_site/src/_includes/get_started/windows/python/gpu/pip.md # docs/static_site/src/_includes/get_started/windows/r/cpu.md # docs/static_site/src/_includes/get_started/windows/r/gpu.md # docs/static_site/src/pages/get_started/build_from_source.md # docs/static_site/src/pages/get_started/download.md # docs/static_site/src/pages/get_started/osx_setup.md # docs/static_site/src/pages/get_started/ubuntu_setup.md # docs/static_site/src/pages/get_started/windows_setup.md * fix broken installation widget - remove empty entries (#18661) * update static files # Conflicts: # docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css # docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map # docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js # docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map * update header dropdown default version * fix failed pipeline * cherry pick 1.7 content from master * update version number in image classification tutorial * minor version fix * fix bullet point format bug * Fixed python website double scroller and improve UX (#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 # Conflicts: # docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css # docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map # docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js # docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map # docs/python_docs/themes/mx-theme/src/scss/_root.scss * add jekyll base url to enable relative path * fix python micro site header link path * update python site css Co-authored-by: Yang Shi <[email protected]> Co-authored-by: Talia Chopra <[email protected]> Co-authored-by: Leonard Lausen <[email protected]>
apache · Sep 21, 2020 · a7b8606 · a7b8606
1 parent daf94c0
commit a7b8606
Show file tree

Hide file tree

Showing 120 changed files with 4,089 additions and 2,645 deletions.
diff --git a/NEWS.md b/NEWS.md
diff --git a/ci/docker/Dockerfile.build.ubuntu_cpu_jekyll b/ci/docker/Dockerfile.build.ubuntu_cpu_jekyll
@@ -28,6 +28,7 @@ RUN apt-get update && apt-get install -y \
       build-essential \
       git \
       zlib1g-dev \
+      wget \
       gnupg2 \
       curl
 

diff --git a/docs/python_docs/_static/feedback.css b/docs/python_docs/_static/feedback.css
@@ -0,0 +1,37 @@
+.feedback-container {
+  text-align: center;
+}
+
+.feedback-answer-container {
+  display: inline-block;
+}
+
+.feedback-question {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-answer {
+  display: inline-block;
+  padding: 0.5em 1em 0.5em 1em;
+  color: #048ccc;
+  cursor: pointer;
+}
+
+.feedback-answer:hover {
+  color: #ffffff;
+  background-color: #048ccc;
+}
+
+.feedback-thank-you {
+  display: none;
+  padding: 0.5em 1em 0.5em 1em;
+}
+
+.feedback-hr-top {
+  margin-top: 50px;
+}
+
+.feedback-hr-bottom {
+  margin-bottom: 30px;
+}
diff --git a/docs/python_docs/_static/feedback.js b/docs/python_docs/_static/feedback.js
@@ -0,0 +1,33 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+$(document).ready(function() {
+  $(".feedback-answer").on("click", function () {
+    $(".feedback-question").remove();
+    $(".feedback-answer-container").remove();
+    $(".feedback-thank-you").show();
+    ga("send", {
+      hitType: "event",
+      eventCategory: "Did this page help you?",
+      eventAction: $(this).attr("data-response"),
+      eventLabel: window.location.pathname || "unknown",
+      eventValue: $(this).attr("data-response") === "yes" ? 1 : 0
+    });
+  });
+});
diff --git a/docs/python_docs/_static/mxnet.css b/docs/python_docs/_static/mxnet.css
@@ -53,7 +53,7 @@
 }
 
 .mdl-layout__header-row {
-    height: 84px !important;
+    height: 80px !important;
 }
 
 .mdl-shadow--2dp {
@@ -203,4 +203,8 @@ p {
     float: right;
     margin: 4px;
     cursor: pointer;
-}
+}
+
+.scrollUp {
+    transform: translateY(-80px);
+}
diff --git a/docs/python_docs/python/api/gluon/index.rst b/docs/python_docs/python/api/gluon/index.rst
@@ -49,7 +49,7 @@ Tutorials
 
    .. card::
       :title: Gluon Guide
-      :link: ../tutorials/packages/gluon/index.html
+      :link: ../../tutorials/packages/gluon/index.html
 
       The Gluon guide. Start here!
 

diff --git a/docs/python_docs/python/tutorials/deploy/inference/image_classification_jetson.md b/docs/python_docs/python/tutorials/deploy/inference/image_classification_jetson.md
@@ -0,0 +1,117 @@
+<!--- Licensed to the Apache Software Foundation (ASF) under one -->
+<!--- or more contributor license agreements.  See the NOTICE file -->
+<!--- distributed with this work for additional information -->
+<!--- regarding copyright ownership.  The ASF licenses this file -->
+<!--- to you under the Apache License, Version 2.0 (the -->
+<!--- "License"); you may not use this file except in compliance -->
+<!--- with the License.  You may obtain a copy of the License at -->
+
+<!---   http://www.apache.org/licenses/LICENSE-2.0 -->
+
+<!--- Unless required by applicable law or agreed to in writing, -->
+<!--- software distributed under the License is distributed on an -->
+<!--- "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY -->
+<!--- KIND, either express or implied.  See the License for the -->
+<!--- specific language governing permissions and limitations -->
+<!--- under the License. -->
+
+# Image Classication using pretrained ResNet-50 model on Jetson module
+
+This tutorial shows how to install MXNet v1.x with Jetson support and use it to deploy a pre-trained MXNet model for image classification on a Jetson module.
+
+## What's in this tutorial?
+
+This tutorial shows how to:
+
+1. Install MXNet v1.x along with its dependencies on a Jetson module (This tutorial has been tested on Jetson Xavier AGX and Jetson Nano modules)
+
+2. Deploy a pre-trained MXNet model for image classifcation on the module
+
+## Who's this tutorial for?
+
+This tutorial would benefit developers working on Jetson modules implementing deep learning applications. It assumes that readers have a Jetson module setup with Jetpack installed, are familiar with the Jetson working environment and are somewhat familiar with deep learning using MXNet.
+
+## Prerequisites
+
+To complete this tutorial, you need:
+
+* A [Jetson module](https://developer.nvidia.com/embedded/develop/hardware) setup with [Jetpack 4.4](https://docs.nvidia.com/jetson/jetpack/release-notes/) installed using NVIDIA [SDK Manager](https://developer.nvidia.com/nvidia-sdk-manager)
+
+* An SSH connection to the module OR display and keyboard setup to directly open shell on the module
+
+* [Swapfile](https://help.ubuntu.com/community/SwapFaq) installed, especially on Jetson Nano for additional memory (increase memory if the inference script terminates with a `Killed` message)
+
+## Installing MXNet v1.x with Jetson support
+
+To install MXNet with Jetson support, you can follow the [installation guide](https://mxnet.apache.org/get_started/jetson_setup) on MXNet official website.
+
+Alternatively, you can also directly install MXNet v1.6 wheel with Jetson support, hosted on a public s3 bucket. Here are the steps to install this wheel:
+
+*WARNING: this MXNet wheel is provided for your convenience but it contains packages that are not provided nor endorsed by the Apache Software Foundation.
+As such, they might contain software components with more restrictive licenses than the Apache License and you'll need to decide whether they are appropriate for your usage. Like all Apache Releases, the
+official Apache MXNet (incubating) releases consist of source code only and are found at https://mxnet.apache.org/get_started/download .*
+
+We start by installing MXNet dependencies
+```bash
+sudo apt-get update
+sudo apt-get install -y git build-essential libopenblas-dev libopencv-dev python3-pip
+sudo pip3 install -U pip
+```
+
+Then we download and install MXNet v1.6 wheel with Jetson support
+```bash
+wget https://mxnet-public.s3.us-east-2.amazonaws.com/install/jetson/1.6.0/mxnet_cu102-1.6.0-py2.py3-none-linux_aarch64.whl
+sudo pip3 install mxnet_cu102-1.6.0-py2.py3-none-linux_aarch64.whl
+```
+
+And we are done. You can test the installation now by importing mxnet from python3
+```bash
+>>> python3 -c 'import mxnet'
+```
+
+## Running a pre-trained ResNet-50 model on Jetson
+
+We are now ready to run a pre-trained model and run inference on a Jetson module. In this tutorial we are using ResNet-50 model trained on Imagenet dataset. We run the following classification script with either cpu/gpu context using python3.
+
+```python
+from mxnet import gluon
+import mxnet as mx
+
+# set context
+ctx = mx.gpu()
+
+# load pre-trained model
+net = gluon.model_zoo.vision.resnet50_v1(pretrained=True, ctx=ctx)
+net.hybridize(static_alloc=True, static_shape=True)
+
+# load labels
+lbl_path = gluon.utils.download('http://data.mxnet.io/models/imagenet/synset.txt')
+with open(lbl_path, 'r') as f:
+    labels = [l.rstrip() for l in f]
+
+# download and format image as (batch, RGB, width, height)
+img_path = gluon.utils.download('https://github.com/dmlc/web-data/blob/master/mxnet/doc/tutorials/python/predict_image/cat.jpg?raw=true')
+img = mx.image.imread(img_path)
+img = mx.image.imresize(img, 224, 224) # resize
+img = mx.image.color_normalize(img.astype(dtype='float32')/255,
+                               mean=mx.nd.array([0.485, 0.456, 0.406]),
+                               std=mx.nd.array([0.229, 0.224, 0.225])) # normalize
+img = img.transpose((2, 0, 1)) # channel first
+img = img.expand_dims(axis=0) # batchify
+img = img.as_in_context(ctx)
+
+prob = net(img).softmax() # predict and normalize output
+idx = prob.topk(k=5)[0] # get top 5 result
+for i in idx:
+    i = int(i.asscalar())
+    print('With prob = %.5f, it contains %s' % (prob[0,i].asscalar(), labels[i]))
+```
+
+After running the above script, you should get the following output showing the five classes that the image most relates to with probability:
+```bash
+With prob = 0.41940, it contains n02119789 kit fox, Vulpes macrotis
+With prob = 0.28096, it contains n02119022 red fox, Vulpes vulpes
+With prob = 0.06857, it contains n02124075 Egyptian cat
+With prob = 0.03046, it contains n02120505 grey fox, gray fox, Urocyon cinereoargenteus
+With prob = 0.02770, it contains n02441942 weasel
+```
diff --git a/docs/python_docs/themes/mx-theme/mxtheme/feedback.html b/docs/python_docs/themes/mx-theme/mxtheme/feedback.html
@@ -0,0 +1,10 @@
+<hr class="feedback-hr-top" />
+<div class="feedback-container">
+    <div class="feedback-question">Did this page help you?</div>
+    <div class="feedback-answer-container">
+        <div class="feedback-answer yes-link" data-response="yes">Yes</div>
+        <div class="feedback-answer no-link" data-response="no">No</div>
+    </div>
+    <div class="feedback-thank-you">Thanks for your feedback!</div>
+</div>
+<hr class="feedback-hr-bottom" />
diff --git a/docs/python_docs/themes/mx-theme/mxtheme/header_top.html b/docs/python_docs/themes/mx-theme/mxtheme/header_top.html
@@ -19,6 +19,24 @@
         <a class="page-link" href="{{theme_relative_url}}ecosystem">Ecosystem</a>
         <a class="page-link page-current" href="{{theme_relative_url}}api">Docs & Tutorials</a>
         <a class="page-link" href="https://github.com/apache/incubator-mxnet">GitHub</a>
+        <div class="dropdown">
+          <span class="dropdown-header">1.7
+            <svg class="dropdown-caret" viewBox="0 0 32 32" class="icon icon-caret-bottom" aria-hidden="true"><path class="dropdown-caret-path" d="M24 11.305l-7.997 11.39L8 11.305z"></path></svg>
+          </span>
+          <div class="dropdown-content">
+            <a class="dropdown-option" href="/">master</a><br>
+            <a class="dropdown-option-active" href="/versions/1.7/">1.7</a><br>
+            <a class="dropdown-option" href="/versions/1.6/">1.6</a><br>
+            <a class="dropdown-option" href="/versions/1.5.0/">1.5.0</a><br>
+            <a class="dropdown-option" href="/versions/1.4.1/">1.4.1</a><br>
+            <a class="dropdown-option" href="/versions/1.3.1/">1.3.1</a><br>
+            <a class="dropdown-option" href="/versions/1.2.1/">1.2.1</a><br>
+            <a class="dropdown-option" href="/versions/1.1.0/">1.1.0</a><br>
+            <a class="dropdown-option" href="/versions/1.0.0/">1.0.0</a><br>
+            <a class="dropdown-option" href="/versions/0.12.1/">0.12.1</a><br>
+            <a class="dropdown-option" href="/versions/0.11.0/">0.11.0</a>
+          </div>
+        </div>
       </div>
     </nav>
   </div>

diff --git a/docs/python_docs/themes/mx-theme/mxtheme/layout.html b/docs/python_docs/themes/mx-theme/mxtheme/layout.html
@@ -7,6 +7,54 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <style>
+    .dropdown {
+        position: relative;
+        display: inline-block;
+    }
+
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        min-width: 160px;
+        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+        padding: 12px 16px;
+        z-index: 1;
+        text-align: left;
+    }
+
+    .dropdown:hover .dropdown-content {
+        display: block;
+    }
+
+    .dropdown-option:hover {
+        color: #FF4500;
+    }
+
+    .dropdown-option-active {
+        color: #FF4500;
+        font-weight: lighter;
+    }
+
+    .dropdown-option {
+        color: #000000;
+        font-weight: lighter;
+    }
+
+    .dropdown-header {
+        color: #FFFFFF;
+        display: inline-flex;
+    }
+
+    .dropdown-caret {
+        width: 18px;
+    }
+
+    .dropdown-caret-path {
+        fill: #FFFFFF;
+    }
+    </style>
     {{ super() }}
 {% endblock %}
 
@@ -16,10 +64,12 @@
     '_static/sphinx_materialdesign_theme.css',
     '_static/fontawesome/all.css',
     '_static/fonts.css',
+    '_static/feedback.css',
 ] %}
 
     {%- block header %}
-	<script type="text/javascript" src="{{ pathto('_static/sphinx_materialdesign_theme.js', 1) }} "></script>
+        <script type="text/javascript" src="{{ pathto('_static/sphinx_materialdesign_theme.js', 1) }} "></script>
+        <script type="text/javascript" src="{{ pathto('_static/feedback.js', 1) }}"></script>
     {% endblock %}
 {%- block relbar1 %}{% endblock %}
 {%- block relbar2 %}{% include "relations.html" %}{% endblock %}
@@ -37,6 +87,7 @@
 {%- block document %}
         <div class="page-content" role="main">
         {% block body %} {% endblock %}
+        {% include "feedback.html" %}
         </div>
         <div class="side-doc-outline">
             <div class="side-doc-outline--content">

diff --git a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css
diff --git a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.css.map
diff --git a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js
diff --git a/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map b/docs/python_docs/themes/mx-theme/mxtheme/static/sphinx_materialdesign_theme.js.map
diff --git a/docs/python_docs/themes/mx-theme/mxtheme/theme.conf b/docs/python_docs/themes/mx-theme/mxtheme/theme.conf
@@ -6,7 +6,7 @@ pygments_style = friendly
 
 [options]
 header_links =
-relative_url = /
+relative_url = /versions/1.7/
 primary_color = blue
 accent_color = deep_orange
 

diff --git a/docs/python_docs/themes/mx-theme/src/js/scrollspy.js b/docs/python_docs/themes/mx-theme/src/js/scrollspy.js
@@ -42,6 +42,21 @@ export default class ScrollSpy {
             }, 1);
         });
 
+        this.scrollElement.addEventListener("click", (e) => {
+            const target = e.target;
+            if (target.tagName !== "A") return;
+            window.onclickToc = true;
+            for (let i = 0, max = this.nav.length; i < max; i++) {
+                const navElement = this.nav[i];
+                if (navElement.href === target.href) {
+                    navElement.classList.add(this.className);
+                    navElement.classList.add('mdl-color-text--primary');
+                } else {
+                    navElement.classList.remove(this.className);
+                    navElement.classList.remove('mdl-color-text--primary');
+                }
+            }
+        });
     }
 
     getContents(contentSelector) {
@@ -72,15 +87,21 @@ export default class ScrollSpy {
 
     isView(element) {
         const scrollTop = this.scrollElement.scrollTop;
-        const calcBotom = scrollTop + this.offsetTop;
+        const subHeaderRect = document.querySelector(".mdl-layout__header-row").getBoundingClientRect();
+        const headerHeight = subHeaderRect.top + subHeaderRect.height;
+        const scrollBottom = scrollTop + window.innerHeight - headerHeight;
         const rect = element.getBoundingClientRect();
         const elementTop = rect.top + scrollTop;
         const elementBottom = elementTop + element.offsetHeight;
 
-        return elementTop <= calcBotom + this.offsetTop && elementBottom > scrollTop + this.offsetTop;
+        return elementTop < scrollBottom - 30 && elementBottom > scrollTop + headerHeight + 30;
     }
 
     toggleNavClass(elements) {
+        if (window.onclickToc) {
+            window.onclickToc = false;
+            return;
+          }
         let maxDepth = 0;
         let maxDepthElement = $();