Show "Jump To" menu even if user hasn't scrolled down

canvas/css/canvas.css

@@ -904,20 +904,32 @@ div.dialog {
         width: 100%;
         z-index: 2;
         cursor: pointer;
+        display: none;
+    }
+    .jump-to-click-area-toggle {
+        display: block;
     }
     .jump-to {
-        position: fixed;
-        top: 0;
-        z-index: 1;
         width: 100%;
         overflow: hidden;
         min-height: 64px;
+        border-radius: 5px;
+        display: block;
+    }
+    .jump-to-toggle {
+        /* display: none; */
+        position: fixed;
+        top: 0;
+        z-index: 1;
         margin-left: -15px;
         border-radius: 0;
         padding-top: 2em;
-        display: none;
     }
-    .jump-to div div {
+    /*
+    .jump-to-list {
+    }
+     */
+    .jump-to-list-toggle {
         display: none;
     }
     .jump-to hr {
@@ -938,19 +950,25 @@ div.dialog {
         padding-left: 15px;
         padding-bottom: 10px;
     }
-    .jump-to img {
+    .jump-to-img {
         margin-right: 5px;
         height: 18px;
         width: 18px;
+        display: none;
+    }
+    .jump-to-img-toggle {
+        display: inline;
     }
     /*
     .jump-to .jump-to-arrow {
         display: inline-block;
     }
      */
+    /*
     .jump-to label {
         cursor: pointer;
     }
+     */
     .jump-to-arrow-90 {
         transform: rotate(90deg);
         transition: .3s;

canvas/index.php

@@ -90,9 +90,9 @@
                 <div class="jump-to-click-area">&nbsp;</div>
                 <div class="jump-to row">
                     <div class="col-s-12">
-                        <label class="jump_to"><img class="jump-to-arrow-0" src="icons/glyphicon-chevron-right.gif" />Jump to...</label>
+                        <label><img class="jump-to-img jump-to-arrow-0" src="icons/glyphicon-chevron-right.gif" />Jump to...</label>
                         <!-- <a href="#"><label class="jump_to"><span class="jump-to-arrow glyphicon glyphicon-chevron-right"></span> Jump to...</label></a> -->
-                        <div>
+                        <div class="jump-to-list">
                             <hr />
                             <ul>
                                 <li>

canvas/js/canvas.js

@@ -110,25 +110,56 @@ $(document).ready(function() {
     "Jump to" functions
     ================================================= */
     
+    var hasScrolledDown = false;
+    
+    function showFixedJumpedTo() {
+        // Add classes
+        $("div.jump-to-click-area").addClass("jump-to-click-area-toggle");
+        $("div.jump-to").addClass("jump-to-toggle");
+        $("div.jump-to-list").addClass("jump-to-list-toggle");
+        $("img.jump-to-img").addClass("jump-to-img-toggle");
+        
+        // If the user clicks on a link and scrolls up the page, hide list
+        $("div.jump-to-list").hide();
+    }
+    
+    function showInitialJumpedTo() {
+        // Toggle classes
+        $("div.jump-to-click-area").removeClass("jump-to-click-area-toggle");
+        $("div.jump-to").removeClass("jump-to-toggle");
+        $("div.jump-to-list").removeClass("jump-to-list-toggle");
+        $("img.jump-to-img").removeClass("jump-to-img-toggle");
+
+        // If the user clicks on a link and scrolls up the page, toggle list
+        $("div.jump-to-list").show();
+        hasScrolledDown = false;
+    }
+    
     // When the user scrolls down, change "position" to "fixed"
     $(window).scroll(function() {
         // If the web page is opened on a mobile
         if($(window).width() <= 499) {
             // Declarations
             var scrollPosition = $(window).scrollTop();
-            // var firstFieldPosition = $("div.field_01").offset().top;
-            var firstItemPosition = $("div.saved-tags").offset().top;
+            var jumpToPosition = $("div.jump-to").offset().top;
             
-            // If the user has scrolled down to the first field
-            if(scrollPosition >= firstItemPosition) {
-                $("div.jump-to").css("display", "block");
+            // If the user has scrolled down to "Jump To..."
+            if(hasScrolledDown === false && scrollPosition >= jumpToPosition) {
+                showFixedJumpedTo();
+                
+                // Update scroll position
+                $(window).scrollTop($("div.saved-tags").offset().top - 300);
+                hasScrolledDown = true;
             }
-            else {
-                $("div.jump-to").css("display", "none");
+            
+            // If the user has scrolled up to the top
+            else if(hasScrolledDown === true && scrollPosition === 0) {
+                showInitialJumpedTo();
             }
         }
+        // If the web page is not open on a mobile
         else {
-            $("div.jump-to").css("display", "none");
+            showInitialJumpedTo();
         }
     });
     
@@ -140,8 +171,8 @@ $(document).ready(function() {
         // Rotate arrow
         // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-180");
         // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-0");
-        $(".jump-to img").toggleClass("jump-to-arrow-90");
-        $(".jump-to img").toggleClass("jump-to-arrow-0");
+        $("img.jump-to-img").toggleClass("jump-to-arrow-90");
+        $("img.jump-to-img").toggleClass("jump-to-arrow-0");
         
         return false;
     });
@@ -153,15 +184,6 @@ $(document).ready(function() {
         var chosenFieldPosition;
         var scrollPositionNew;
         
-        // Toggle the menu
-        $("div.jump-to div div").slideToggle(300);
-        
-        // Rotate arrow
-        // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-180");
-        // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-0");
-        $(".jump-to img").toggleClass("jump-to-arrow-90");
-        $(".jump-to img").toggleClass("jump-to-arrow-0");
-        
         // Detect the scroll position of the chosen field
         // If the user has chosen the list item 0
         if(chosenLiIndex === 0) {
@@ -176,14 +198,31 @@ $(document).ready(function() {
             chosenFieldPosition = $("div.field_" + chosenLiIndex).offset().top;
         }
         
-        // Set the new scroll position
-        // If the user has chosen to jump to "Saved Tags"
-        if(chosenLiIndex === 0) {
-            scrollPositionNew = chosenFieldPosition - 14; // 14 // - $("div.jump-to").height() + 38;
+        // If the user hasn't scrolled down
+        if(hasScrolledDown === false) {
+            console.log(chosenLiIndex);
+            // Set the new scroll position
+            scrollPositionNew = chosenFieldPosition - $("div.jump-to").height() - 89;
+            
+            // Add classes
+            showFixedJumpedTo();
+            
+            // Update scroll position
+            hasScrolledDown = true;
         }
-        // If the user has chosen to jump to a category
+        // If the user has scrolled down to "Jump To..."
         else {
-            scrollPositionNew = chosenFieldPosition - 57; // 77 // - $("div.jump-to").height() - 20;
+            // Set the new scroll position
+            scrollPositionNew = chosenFieldPosition - 57;
+            
+            // Toggle the menu
+            $("div.jump-to-list").slideToggle(300);
+            
+            // Rotate arrow
+            // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-90");
+            // $("div.jump-to span.jump-to-arrow").toggleClass("rotate-arrow-0");
+            $("img.jump-to-img").toggleClass("jump-to-arrow-90");
+            $("img.jump-to-img").toggleClass("jump-to-arrow-0");            
         }
         
         // Apply the new scroll position