Fix flickering of generated toc at fixed position when scrolling page vertically

Author: jimmyzhen

src/AnalysisPage/GraphicalClustering/graphicalClusteringPage.jsx

@@ -156,7 +156,7 @@ function ReportControls({ tissue, toggleReport, currentView }) {
 function LandscapeGraphicalClustering({ tissue, setTissue }) {
   return (
     <div className="graphical-clustering-summary-container row mb-2">
-      <div className="lead col-12">
+      <div className="lead col-12 page-summary">
         Explore multi-omic changes and associated pathway enrichment results
         over the training time course per tissue in adult rats. Compare
         responses between male and female rats, identify pathways affected in
@@ -186,7 +186,7 @@ function LandscapeGraphicalClustering({ tissue, setTissue }) {
 function MitoChondriaGraphicalAnalysis({ tissue, setTissue }) {
   return (
     <div className="graphical-clustering-summary-container row mb-2">
-      <div className="lead col-12">
+      <div className="lead col-12 page-summary">
         Explore the mitochondria-selected (using{' '}
         <ExternalLink
           to="https://www.broadinstitute.org/mitocarta/mitocarta30-inventory-mammalian-mitochondrial-proteins-and-pathways"

src/AnalysisPage/GraphicalClustering/sharedLib.js

@@ -6,7 +6,6 @@ export const tocbotConfig = {
   ignoreSelector: '.toc-ignore',
   headingsOffset: 100,
   scrollSmoothOffset: -100,
-  tocScrollOffset: 100,
 };
 
 export const pass1b06GraphicalClusteringLandscapeImageLocation =
@@ -17,15 +16,32 @@ export const pass1b06GraphicalClusteringMitoImageLocation =
 
 // fix toc position to the top of the page when scrolling
 export function handleScroll() {
+  // page elements to compute total offset height
+  // to fix toc to the top of the page when scrolling
+  const pageHeader = document.querySelector('.page-header');
+  const summary = document.querySelector('.page-summary');
+  const intro = document.getElementById('introduction');
+  const control = document.querySelector('.controlPanelContainer');
+  // current scroll height of the page
+  const scrollHeight =
+    window.scrollY ||
+    document.body.scrollTop ||
+    (document.documentElement && document.documentElement.scrollTop);
+  // conditions required to fix toc to the top of the page
+  const page = document.querySelector('.graphicalClusteringPage');
   const toc = document.getElementById('TOC');
-  if (toc) {
-    const tocBottom = toc.offsetTop + toc.offsetHeight;
 
-    if (window.scrollY >= tocBottom) {
-      toc.classList.add('toc-fix-top');
-    }
+  if (page && toc) {
+    const offsetHeight =
+      pageHeader.offsetHeight +
+      summary.offsetHeight +
+      intro.offsetHeight +
+      control.offsetHeight +
+      30;
 
-    if (window.scrollY <= tocBottom) {
+    if (scrollHeight >= offsetHeight) {
+      toc.classList.add('toc-fix-top');
+    } else {
       toc.classList.remove('toc-fix-top');
     }
   }

src/sass/_analysisPage.scss

@@ -173,7 +173,7 @@
     border-radius: 5px;
     padding: 0.5rem;
     overflow-x: auto;
-    transition: top 0.3s ease;
+    transition: top 0.5s ease;
 
     &.toc-fix-top {
       position: fixed;