I'm trying to create a sticky/fixed navbar with a transparent background that becomes solid when scrolled.
I would have preferred to do it with only css and the position fixed/sticky property but I didn't find any documentation about it.
Not wishing to use Bootsrap, I turned to a purely javascript solution despite my incompetence on this language. I would like your help to realize this.
I tried to implement 2 solutions that I saw during my research without success.
1 ) Navbar change on scroll, can't use libraries
for the second link the proposal starting with "this is a simple pure javascript"
My problem with the first method is that I already don't understand the html/css structure. Especially "mynav" and "navfixed" that I can't find in the provided css/html. By trying to redo it with my own structure, I notice that my nav and ul element seem to be inverted compared to the proposed solution and I get stuck.
I tried to create an intermediate class Div between my nav and ul element, but that doesn't seem right either. I hope this is not too confusing an explanation.
Thanks in advance for your help.
<script>
var myNav = document.getElementById('menu');
window.onscroll = function () {
var scroll = document.body.scrollTop || document.documentElement.scrollTop;
if (scroll >= 50) {
myNav.classList.add("menu");
myNav.classList.remove("navtransparent");
} else {
myNav.classList.add("navtransparent");
myNav.classList.remove("menu");
}
};
</script>body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
background-color: #29be29;
}
.container {
display: grid;
}
.banner {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(7, 1fr);
background-color: rgb(255, 255, 255);
height: 120vh;
}
/* ///////////////////////////////////////////////////////////////////////////// Création menu //////////////////////////////////////////////////////////////////// */
#menu {
display: grid;
justify-content: center;
grid-area: 1/2/2/6;
font-family: 'Roboto', sans-serif;
font-size: 1.2rem;
text-transform: uppercase;
font-weight: bold;
align-self: center;
background-color: rgb(82, 189, 221);
position: fixed;
width: 100%;
/* position: sticky; */
top: 0;
place-self: center;
/* margin-top: 4.7vh; */
}
.navtransparent {
background-color: transparent;
}
.list {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
.tabs {
list-style-type: none;
margin: 0 2vw;
}
.links {
text-decoration: none;
color: #2c5f8b;
white-space: nowrap;
}
/* /////////////////////////////////////////////////////////////////////////// placement logo ///////////////////////////////////////////////////////////////////// */
#logo {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-area: 1/2/2/3;
mix-blend-mode: multiply;
}
.logosize {
align-self: center;
justify-self: start;
width: 100%;
height: 100%;
object-fit: scale-down;
margin: 0;
}
.secgrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 1fr 1fr 1fr 4fr 1fr 1fr;
}
.titlesec {
grid-column: 3/5;
display: flex;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-size: 2.3rem;
font-weight: bold;
text-transform: uppercase;
color: #5046d6;
white-space: nowrap;
}
/* //////////////////////////////////////////////////////////////////// CARD SERVICE ////////////////////////////////////////////////////////////////// */
.cardservice {
grid-area: 4/1/5/3;
justify-self: center;
}
.gridcard {
display: grid;
grid-template-columns: repeat(20, 1fr);
grid-template-rows: repeat(12, 1fr);
}
.paragraph {
border-radius: 40px;
width: 390px;
height: 350px;
border: 18px solid #e5d0ce;
background-color: black;
position: relative;
padding-top: 15px;
}<body class="container">
<!-- DEBUT ARTICLE -->
<article>
<nav id="menu">
<ul class="list">
<li class="tabs"> <a href="" class="links">Services</a> </li>
<li class="tabs"> <a href="" class="links">Compétences</a> </li>
<li class="tabs"> <a href="" class="links">Portfolio</a> </li>
<li class="tabs"> <a href="" class="links">À propos</a> </li>
<li class="tabs"> <a href="" class="links">Contact</a> </li>
</ul>
</nav>
<section>
<!-- ////////////////////////////////////////////////PARTIE HEADER/BANNER///////////////////////////////////////////////// -->
<div class="banner">
<div id="logo">
<img class="logosize" src="../Site personnel_freelance/Assets/IMG/Icons_contacts/tel_icone.png"
alt="">
</div>
<!-- ////////////////////////////////////////////////PARTIE MES SERVICES//////////////////////////////////////////////// -->
</section>
<section>
<div class="secgrid">
<h2 class="titlesec">Mes services</h2>
<div class="diamond2">
<div class="littlediamond"></div>
<div class="littlediamond"></div>
<div class="littlediamond"></div>
<div class="littlediamond"></div>
</div>
<!--///////////////////////////////// création cartes services //////////////////////////// -->
<!-- carte service 1 -->
<div class="cardservice">
<p class="paragraph gridcard">
<span class="">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Laboriosam asperiores cum iste
nulla omnis modi minus, earum temporibus deleniti voluptatum eius sit magni iusto
exercitationem, porro autem eos saepe accusamus.
<span class="titlecard">lorem</span>
<span class="presCard">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed officia similique impedit
ut perferendis, tempore vel pariatur quam laudantium enim eligendi, et iure rem
asperiores, fugit quasi dolore deleniti nostrum.
</span>
</p>
</div>
</div>
</section>
</article>
</body>
</html>