Change CSS After Scrolling

Question

I have a navbar that uses some CSS to change the opacity:

.navbar {
    background-color: #4B5253;
    opacity: 0.8;
    filter: alpha(opacity = 80);
}

I need the opacity to change to 1.0 after the user scrolls down a certain number of pixels, for example, 500px.

I'm using jQuery, but I didn't find a solution.

Also, I'm not good with JavaScript, and sometimes I don't know where should I put my code. So if is there any way to do it all with CSS, it will be great!

Here is an example of what I want—pay close attention to the header as you scroll down.

Solution 1

If you want a native solution then use this:

function changeCss () {
  var bodyElement = document.querySelector("body");
  var navElement = document.querySelector("nav");
  this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}
window.addEventListener("scroll", changeCss , false);

here is a live demo

function changeCss () {
  var bodyElement = document.querySelector("body");
  var navElement = document.querySelector("nav");
  this.scrollY > 500 ? navElement.style.opacity = .8 : navElement.style.opacity = 1;
}

window.addEventListener("scroll", changeCss , false);

body{
  background-color: white;
  height: 1000vh
}
nav{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  text-align: center;
  background: blueviolet
}
nav li{display: inline-block}
nav a{
  padding: 10px 12px;
  color: white;
  text-transform:uppercase;
  text-decoration: none
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav> 

Solution 2

The easiest way to accomplish what you're trying to do is a combination of some simple jQuery and CSS transitions.

We will use JavaScript to check for the windows scroll position on every scroll event and compare it to the distance of the bottom of the #main element; if the scroll position is greater, then we'll apply a class to the body to indicate we have scrolled past #main, and then we will use CSS to define the nav styling for that state.

Change the CSS code so it changes opacity when it's past #main.

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll', function() {

  // we round here to reduce a little workload
  stop = Math.round($(window).scrollTop());
  if (stop > mainbottom) {
    $('.nav').addClass('past-main');
  } else {
    $('.nav').removeClass('past-main');
  }

});

.nav {
  background-color: transparent;
  color: #fff;
  transition: all 0.25s ease;
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #ccc;
  padding: 1em 0;
  /* make sure to add vendor prefixes here */
}

.nav.past-main {
  background-color: #fff;
  color: #444;
}

#main {
  height: 500px;
  background-color: red;
}

#below-main {
  height: 1000px;
  background-color: #eee;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<nav class="nav">
  <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

Solution 3

I wrote CSS for class a, then class b.

In .a, opacity was 0.8 and in .b the opacity was 1.0. With jQuery, I just changed the element's class:

.a {
    opacity: 0.8;
}

.b {
    opacity: 1.0;
}

$(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 500;

    if ($heightScrolled < $defaultHeight) {
        $('#mynav').removeClass("b")
        $('#mynav').addClass("a")
    }
    else {
        $('#mynav').addClass("b")
    }

});