From f277b6fb7b34badd4a902368a53a6753c60101b1 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Wed, 15 Jul 2020 06:34:22 -0400
Subject: [PATCH] fix: context scroll current if next invisible

---
 ui/app/src/SideContext/SideContext.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui/app/src/SideContext/SideContext.tsx b/ui/app/src/SideContext/SideContext.tsx
index ebf1cddfd..dd826c194 100644
--- a/ui/app/src/SideContext/SideContext.tsx
+++ b/ui/app/src/SideContext/SideContext.tsx
@@ -23,17 +23,20 @@ export const SideContext: FC<SideContext> = ({ pageRef }) => {
   const [activeItem, setActiveItem] = useState<number>(-1);
   const onScroll = useCallback(() => {
     if (pageRef?.current) {
-      const curScroll =
-        window.scrollY +
-        (pageRef.current.getBoundingClientRect().top || 0) -
-        80;
-
-      //find first anchor element that is above the scroll position
-      const curItem = items.findIndex(item => {
+      const { top = 0 } = pageRef.current.getBoundingClientRect() || {};
+      const topScroll = window.scrollY + top - 80;
+      //find first anchor element that is below the scroll position
+      const curItem = items.findIndex((item, index) => {
         const el = pageRef.current?.querySelector(`#${item.id}`);
+        const nextItem = index < items.length - 1 && items[index + 1];
+        const nextEl =
+          nextItem && pageRef.current?.querySelector(`#${nextItem.id}`);
         if (el) {
-          const { top } = el.getBoundingClientRect();
-          return top > curScroll;
+          const { top: elTop } = el.getBoundingClientRect();
+          const { top: nextTop = 0 } = nextEl
+            ? nextEl.getBoundingClientRect()
+            : {};
+          return elTop > topScroll || nextTop > window.innerHeight;
         }
         return false;
       });