Combination with scrollspy and auto focus on tabs while scrolling

[manojdots]

Hello there.

I combined scrolling tabs with scrollspy. Everything works fine and when I scroll down, tabs will be selected automatically. But the problem is when the selected tab goes beyond the navbar.

`import styled, { css } from "styled-components";
import { AppBar } from "@material-ui/core";
import ScrollspyNav from "react-scrollspy-nav";

const Scrollpsy = () => (


<ScrollspyNav
scrollTargetIds={[
"itinerary",
"review",
"whatsIncluded",
"departureDate"
]}
offset={170}
activeNavClass="is-active"
scrollDuration="1000"
headerBackground="true"
>

• 
  View departure dates
  


• 
  Itinerary
  


• 
  What’s included
  


• 
  Reviews
  

);

export default Scrollpsy;

const ScrollpsyAppBar = styled(AppBar) ${({ theme }) => css
&.MuiAppBar-colorSecondary {
align-items: center;
padding: ${theme.spacing(0, 4)};
box-shadow: none;
z-index: 9999;
}
} ;

const Container = styled.div ${({ theme }) => css
width: 100%;
max-width: ${theme.gridWidths[12]};

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: ${theme.spacing(2, 0, 0, 0)};
  margin: 0;
  overflow: auto;

  li {
    list-style: none;
    padding: ${theme.spacing(0, 1)};
    white-space: nowrap;
    text-align: center;

    @media (min-width: ${theme.breakpoints.values.md}px) {
      flex: 1;
    }

    &:first-child {
      padding-left: 0;
    }
  }

  a {
    text-align: center;
    position: relative;
    padding: ${theme.spacing(2, 2, 4, 2)};
    display: inline-block;
    min-width: 160px;

    &:hover,
    &:visited {
      color: #fff;
    }

    &:before,
    &:after {
      position: absolute;
      left: 0;
      right: 0;
      transition: 0.3s ease all;
      content: "";
    }

    &:before {
      top: 0;
      bottom: 0;
      border-radius: 10px 10px 0 0;
      transform: scaleY(0);
      transform-origin: bottom left;
      z-index: -1;
      opacity: 0;
    }

    &.is-active {
      font-weight: 700;

      &:before {
        transform: scaleY(1);
        opacity: 1;
      }
    }

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }
}

} ;
`
Please give suggestion.
Thanks & Regards