Code:
/* -------------------------------------NAV & BANNER------------------------ */
#logo{
height: 60px;
width: 60px;
}
.nav-color{
transition: 0.5s;
background-color: rgba(0, 0, 0, 0.75);
}
.nav-null-color{
transition: 0.5s;
}
.banner{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
width: 100vw;
border-bottom: 1px solid #ff8000;
}
.title {
background-color: rgba(0,0,0, 0.3);
width: 50vw;
border-radius: 25px;
}
.shadow{
background-color: #ffffff;
opacity: 25%;
}
#large-text{
font-size: 60px;
}
/* --------------------------------About Us---------------------------------- */
.corporate{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 100vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
.blank{
background-color: rgba(255, 255, 255, 0.5);
border-radius: 15px;
}
/* --------------------------------Worldwide---------------------------------- */
.worldwide{
background: #ffffff;
width: 81vw;
border-bottom: 1px solid #ff8000;
}
.map{
border-radius: 15px;
}
/* --------------------------------Careers Title---------------------------------- */
.careers{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
border-bottom: 1px solid #ff8000;
}
/* --------------------------------Contact Us---------------------------------- */
.contact{
background-image: url('');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-size: cover;
width: 81vw;
height: 100vh;
}
.btn-lg{
width: 335px;
}
/* --------------------------------Scroll Menu---------------------------------- */
.scroll-spy{
/* position: -webkit-sticky; */
position: sticky;
top: 2rem;
height: 10vh;
border-right: 1px solid #ebebeb;
}
/* -------------------------------------------Footer----------------------- */
.footer{
border-top: 1px solid #ff8000;
width: 100vw;
height: 60vh;
background-color: #acb7ba;
font-size: 12px;
}
#icon{
font-size: 25px;
}
#youtube{
height: 200px;
weight: 200px;
}I am currently working on making some adjustments to the lateral menu as it overlaps with the footer when scrolling down. I have attempted to address this issue using JQuery by changing the position property to relative once the scroll surpasses a specific value. This modification appears to be functioning correctly. However, I am encountering difficulties in reverting the position property back to sticky when the scroll value is below the designated threshold. Can you provide any insights or suggestions on what might be missing from my implementation? Your assistance is greatly appreciated. Thank you.