CODEWITHSUNDEEP
javascriptjqueryhtmlcss
peter
peter

Reputation: 23

Change menu background opacity after starting to scroll down

I tried a lot of code snippets to do this, but nothing worked.

In CSS I used this to make the menu floating on mobile:

@media screen and (max-width: 900px){
   header#s5_header_area1 {
      position: sticky;
      top: 0;
      z-index: 2;
  }
}

It's working, but I want to give the menu a little transparency after I start to scroll down. How can I do this?

Upvotes: 1

Views: 1235

Answers (1)

Mudassir
Mudassir

Reputation: 1156

When the user has scrolled it will apply a class .menu--alt to the menu otherwise it will just have the class .menu.

Updating the CSS should do what you want. Looing back at your question you will want to edit the styles for header#s5_header_area1 using javascript - a simple refactor of the example below will do it.

const menu = document.querySelector(".menu");

document.addEventListener("scroll", () => {

  // use document.documentElement for chrome, firefox, ie or opera
  // and document.body for safari since that's where overflow is set in those browsers
  if (document.documentElement.scrollTop > 0)
    menu.classList.add("menu--alt");
  else
    menu.classList.remove("menu--alt");

});
.content {
  height: 2000px;
  background: pink;
}

.menu {
  background-color: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  padding: 20px;
  box-sizing: border-box;
}

.menu--alt {
  opacity: 0.5;
}
<div class="menu">
  menu (not clickable) - scroll to see opacity change
</div>

<div class="content">
  hi there
</div>

Upvotes: 3

Related Questions