tutorials.de - Scroll

by SpiceLab

HTML

<nav>
  <ul><b>Menü</b>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
    <li>Option 4</li>
  </ul>
</nav>
<div id="d1"></div>
<div id="d2"></div>

CSS

nav {
  position: fixed;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  z-index: 1
}

nav li {
  display: inline;
  padding: 5px 10px
}

nav.red {
  background: red
}

div {
  height: 150px;
  width: 250px;
}

#d1 {
  background-color: green
}

#d2 {
  background-color: cyan
}

JavaScript

$(window).on('scroll', function() {
  if ($(this).scrollTop() > $('#d2').offset().top - $('nav').height()) {
		$('nav').addClass('red');
	} else {
		$('nav').removeClass('red');
	}
});