fix scroll into view behavior in navigation

- set position relative on .nav-menu
- remove position relative from .nav-item
- optimize computations for scroll into view
- remove debug statements

diff --git a/src/css/navigation-menu.css b/src/css/navigation-menu.css
index a59da6d..4389582 100644 (file)
--- a/src/css/navigation-menu.css
+++ b/src/css/navigation-menu.css
@@ -38,6 +38,7 @@ html.is-clipped--nav {
   width: 100%;
   padding: 0.5rem 0.75rem;
   line-height: 1.35;
+  position: relative;
 }
 
 .nav-menu h3.title {
@@ -64,7 +65,6 @@ html.is-clipped--nav {
 
 .nav-item {
   list-style: none;
-  position: relative;
   margin-top: 0.5em;
 }
 

diff --git a/src/js/01-navigation.js b/src/js/01-navigation.js
index 7108706..9f6fd1f 100644 (file)
--- a/src/js/01-navigation.js
+++ b/src/js/01-navigation.js
@@ -134,22 +134,19 @@
   }
 
   function scrollItemIntoView (scrollPosition, parent, el) {
-    console.log('scrolling item into view')
-    console.log('stored value: ' + scrollPosition)
     if (!el) return (parent.scrollTop = scrollPosition)
 
     var margin = 10
-    var overTheTop = el.offsetTop - scrollPosition < 0
-    var belowTheBottom = (el.offsetTop - scrollPosition + el.offsetHeight) > parent.offsetHeight
+    //var y = el.getBoundingClientRect().top - parent.getBoundingClientRect().top
+    var y = el.offsetTop
 
-    if (overTheTop) {
-      parent.scrollTop = el.offsetTop - margin
-    } else if (belowTheBottom) {
-      parent.scrollTop = el.offsetTop - (parent.offsetHeight - el.offsetHeight) + margin
+    if (y < scrollPosition) {
+      parent.scrollTop = y - margin
+    } else if (y - parent.offsetHeight + el.offsetHeight > scrollPosition) {
+      parent.scrollTop = y - parent.offsetHeight + el.offsetHeight + margin
     } else {
       parent.scrollTop = scrollPosition
     }
-    console.log('set scrollTop to ' + parent.scrollTop)
   }
 
   function find (selector, from) {