Skip to content
Advertisement

How to make navbar change color on scroll?

I have a transparent nav bar which on scroll is transparent. This means that if i were to scoll to a place that did not have a solid background color it would clash with other elements such as text. I would like to transtition into a different color to make it stand out more (including making the logo and a tags black) because at the moment it overlaps with text making it barely readable. How can i make it change color on scroll?

full code:

body {
  font-family: 'Montserrat';
  font-size: 22px;
  background-color: #f1f1f1;
}

*, body{
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------- */
/* -----------------------------Background------------------------------- */
/* ----------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- */
/* -----------------------------Navigation------------------------------- */
/* ---------------------------------------------------------------------- */

/* Make the header */
.header{
  height: 80px;
  background: transparent;
  padding: 0 20px;
  color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* Set the logo */
.logo{
  line-height: 80px;
  float: left;
  position: fixed;
  top: 0;
  z-index: 1030;
  color: #fff;
}

/* Set the clickable nav to the right */
.menu{
  float: right;
  line-height: 80px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
  font-size: 20px;
}

/* Transition and color of attribute tags */
.menu a{
  color: #fff;
  text-decoration: none;
  padding: 0 20px;
  transition: 0.4s;
}

/* Set color for hover */
menu a:hover {
  text-decoration: underline;
}

.show-menu-btn,.hide-menu-btn{
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
  color: #fff;
}

.show-menu-btn{
  float: right;
}

.show-menu-btn i{
  line-height: 100px;
}

.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
  color: #AEC6CF;
}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

/* ---------------------------------------------------------------------- */
/* --------------------------Responsive-Menu---------------------------- */
/* ---------------------------------------------------------------------- */

@media screen and (max-width:900px) {
  .show-menu-btn,.hide-menu-btn{
    display: block;
  }
  .menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f1f1f1;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .menu a{
    display: block;
    padding: 20px;
    color: black;
  }
  .hide-menu-btn{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .menu{
    right: 0;
  }

  .header {
    height: 90px;
  }

  .logo {
    line-height: 90px;
  }

  .menu ul a {
    line-height: 90px;
  }

  .show-menu-btn i, .hide-menu-btn i{
    line-height: 90px;
  }

  .hide-menu-btn {
    color: #000000;
  }
}

/* ---------------------------------------------------------------------- */
/* ------------------------------Sections-------------------------------- */
/* ---------------------------------------------------------------------- */

/* Section for text */
.main {
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

/* Make text smaller and centered on desktop screen */
.main p {
  margin-top: 10px;
  font-size: 18px;
  padding-left: 100px;
  padding-right: 100px;
}

/* Header Underline */
hr {
  width: 230px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  color: #AEC6CF
}

/* Make text larger and on the left for mobile */
@media screen and (max-width:800px) {
  .main p {
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='style.css'>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
  <meta charset="utf-8"/>
</head>
<body>

<div class="bg" id='home'></div>
<div class="header" id='pronav'>
  <div class='logo' id='logo'>
    <p style='font-size:35px;'>lunAr-creator</p>
  </div>
  <input type="checkbox" id="chk">
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-bars"></i>
  </label>
  <ul class="menu" id='navbar'>
    <a href="#home" onclick="navbarFunc()">Home</a>
    <a href="#about" onclick="navbarFunc()">About</a>
    <a href="#projects" onclick="navbarFunc()">Projects</a>
    <a href="#useful_links" onclick="navbarFunc()">Useful Links</a>
    <a href="#contact" onclick="navbarFunc()">Contact</a>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>

<div class="main" id="about">
  <h2 style='margin-top: 90px;'>About Me</h2>
  <hr/>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  </p>
</div>

<div class="main" id="projects">
  <h2>Projects</h2>
  <hr/>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  </p>
</div>

</body>
</html>

Advertisement

Answer

You can target the parent element of the header and nav prenav and set the background color to change using a transition when the window.pageYOffset hits a certain threshold in a scroll event listener. Use another conditional to change it back if you scroll up to the fold again…

If you want to change the color of the font instead of the background-color change the el.style.backgroundColor to el.style.color and the transition from logo.style.transition = 'background .5s ease-out' to logo.style.transition = 'color .5s ease-out'.

const logo = document.querySelector('#pronav')

const getOffset = () => {
  if(window.pageYOffset > 100){
     logo.style.backgroundColor = 'rgba(0,0,0,0.7)'
     logo.style.transition = 'background .5s ease-out'
     logo.style.boxShadow = '0px 1px 4px black'
  }
  if(window.pageYOffset < 100){
     logo.style.backgroundColor = 'rgba(0,0,0,0)'
     logo.style.transition = 'background .5s ease-out'
     logo.style.boxShadow = 'none' 
  }
}

window.addEventListener('scroll', getOffset)
body {
  font-family: 'Montserrat';
  font-size: 22px;
  background-color: #f1f1f1;
}

*, body{
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------- */
/* -----------------------------Background------------------------------- */
/* ----------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- */
/* -----------------------------Navigation------------------------------- */
/* ---------------------------------------------------------------------- */

/* Make the header */
.header{
  height: 80px;
  background: transparent;
  padding: 0 20px;
  color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* Set the logo */
.logo{
  line-height: 80px;
  float: left;
  position: fixed;
  top: 0;
  z-index: 1030;
  color: #fff;
}

.pronav {
  background-color: rgba(0,0,0,0.7);
  transition: background .5s ease-out;
  box-shadow: 1px 0px 4px black;
}

/* Set the clickable nav to the right */
.menu{
  float: right;
  line-height: 80px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
  font-size: 20px;
}

/* Transition and color of attribute tags */
.menu a{
  color: #fff;
  text-decoration: none;
  padding: 0 20px;
  transition: 0.4s;
}

/* Set color for hover */
menu a:hover {
  text-decoration: underline;
}

.show-menu-btn,.hide-menu-btn{
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
  color: #fff;
}

.show-menu-btn{
  float: right;
}

.show-menu-btn i{
  line-height: 100px;
}

.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
  color: #AEC6CF;
}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

/* ---------------------------------------------------------------------- */
/* --------------------------Responsive-Menu---------------------------- */
/* ---------------------------------------------------------------------- */

@media screen and (max-width:900px) {
  .show-menu-btn,.hide-menu-btn{
    display: block;
  }
  .menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f1f1f1;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .menu a{
    display: block;
    padding: 20px;
    color: black;
  }
  .hide-menu-btn{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .menu{
    right: 0;
  }

  .header {
    height: 90px;
  }

  .logo {
    line-height: 90px;
  }

  .menu ul a {
    line-height: 90px;
  }

  .show-menu-btn i, .hide-menu-btn i{
    line-height: 90px;
  }

  .hide-menu-btn {
    color: #000000;
  }
}

/* ---------------------------------------------------------------------- */
/* ------------------------------Sections-------------------------------- */
/* ---------------------------------------------------------------------- */

/* Section for text */
.main {
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

/* Make text smaller and centered on desktop screen */
.main p {
  margin-top: 10px;
  font-size: 18px;
  padding-left: 100px;
  padding-right: 100px;
}

/* Header Underline */
hr {
  width: 230px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  color: #AEC6CF
}

/* Make text larger and on the left for mobile */
@media screen and (max-width:800px) {
  .main p {
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
  }
}
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='style.css'>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
  <meta charset="utf-8"/>
</head>
<body>

<div class="bg" id='home'></div>
<div class="header" id='pronav'>
  <div class='logo' id='logo'>
    <p style='font-size:35px; '>lunAr-creator</p>
  </div>
  <input type="checkbox" id="chk">
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-bars"></i>
  </label>
  <ul class="menu" id='navbar'>
    <a href="#home" onclick="navbarFunc()">Home</a>
    <a href="#about" onclick="navbarFunc()">About</a>
    <a href="#projects" onclick="navbarFunc()">Projects</a>
    <a href="#useful_links" onclick="navbarFunc()">Useful Links</a>
    <a href="#contact" onclick="navbarFunc()">Contact</a>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>

<div class="main" id="about">
  <h2 style='margin-top: 90px;'>About Me</h2>
  <hr/>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  </p>
</div>

<div class="main" id="projects">
  <h2>Projects</h2>
  <hr/>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  </p>
</div>

</body>
</html>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement