I am working on a project with a horizontal navbar that I want to stay fixed while scrolling. The main window has different colored divs as you scroll down, and I would like the navbar to match the image of the main div while scrolling, creating a looping effect when the main div is no longer visible.
Is this feasible? Here's the CSS I have implemented:
#nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 7%;
text-align: center;
padding: .5em 0 1em 0;
z-index: 1;
overflow: hidden;
background-image: inherit;
}
#nav > ul {
line-height: 0px;
position: relative;
display: inline-block;
margin: 0;
height: 21px;
border-left: solid 1px rgba(192,192,192,0.35);
border-right: solid 1px rgba(192,192,192,0.35);
}
#header {
position: relative;
background-image: url('../images/header.jpg');
background-size: cover;
background-position: center center;
background-attachment: fixed;
color: #fff;
text-align: center;
padding: 2.5em 0 2em 0;
cursor: default;
}
#banner {
background: #fff;
text-align: center;
padding: 4.5em 0 4.5em 0;
}
The Header and Banner sections are utilized within my HTML structure.
Below is the snippet of the HTML code being used:
...
Thank you!