Prechádzať zdrojové kódy

fix: improve active link highlighting for edge cases

Attempt improvement by moving the scroll to anchor logic to the end of window load and adding 1 to elementOffset in case of navbar border.

Appears to solve any issues that could arise (such as when clicking Courses and then Publications, but Projects being highlighted instead) in local testing.

See https://github.com/gcushen/hugo-academic/issues/1199#issuecomment-577293818
See #1199
George Cushen 5 rokov pred
rodič
commit
4a7f4dc088
1 zmenil súbory, kde vykonal 24 pridanie a 24 odobranie
  1. 24 24
      assets/js/academic.js

+ 24 - 24
assets/js/academic.js

@@ -35,7 +35,7 @@
       // Escape special chars from IDs, such as colons found in Markdown footnote links.
       target = '#' + $.escapeSelector(target.substring(1));  // Previously, `target = target.replace(/:/g, '\\:');`
 
-      let elementOffset = Math.ceil($(target).offset().top - getNavBarHeight());  // Round up to highlight right ID!
+      let elementOffset = Math.ceil($(target).offset().top - getNavBarHeight()) + 1;  // Round up to highlight right ID!
       $('body').addClass('scrolling');
       $('html, body').animate({
         scrollTop: elementOffset
@@ -475,29 +475,6 @@
    * --------------------------------------------------------------------------- */
 
   $(window).on('load', function() {
-    // Re-initialize Scrollspy with dynamic navbar height offset.
-    fixScrollspy();
-
-    if (window.location.hash) {
-      // When accessing homepage from another page and `#top` hash is set, show top of page (no hash).
-      if (window.location.hash == "#top") {
-        window.location.hash = ""
-      } else if (!$('.projects-container').length) {
-        // If URL contains a hash and there are no dynamically loaded images on the page,
-        // immediately scroll to target ID taking into account responsive offset.
-        // Otherwise, wait for `imagesLoaded()` to complete before scrolling to hash to prevent scrolling to wrong
-        // location.
-        scrollToAnchor();
-      }
-    }
-
-    // Call `fixScrollspy` when window is resized.
-    let resizeTimer;
-    $(window).resize(function() {
-      clearTimeout(resizeTimer);
-      resizeTimer = setTimeout(fixScrollspy, 200);
-    });
-
     // Filter projects.
     $('.projects-container').each(function(index, container) {
       let $container = $(container);
@@ -631,6 +608,29 @@
       dropdown[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
       menu[dropdown.is(':hover') ? 'addClass' : 'removeClass']('show');
     }, 300);
+
+    // Re-initialize Scrollspy with dynamic navbar height offset.
+    fixScrollspy();
+
+    if (window.location.hash) {
+      // When accessing homepage from another page and `#top` hash is set, show top of page (no hash).
+      if (window.location.hash == "#top") {
+        window.location.hash = ""
+      } else if (!$('.projects-container').length) {
+        // If URL contains a hash and there are no dynamically loaded images on the page,
+        // immediately scroll to target ID taking into account responsive offset.
+        // Otherwise, wait for `imagesLoaded()` to complete before scrolling to hash to prevent scrolling to wrong
+        // location.
+        scrollToAnchor();
+      }
+    }
+
+    // Call `fixScrollspy` when window is resized.
+    let resizeTimer;
+    $(window).resize(function() {
+      clearTimeout(resizeTimer);
+      resizeTimer = setTimeout(fixScrollspy, 200);
+    });
   });
 
 })(jQuery);