苗景云的博客

html代码

<header id="header">...</header>

Js代码

$(function () {
  $(window).scroll(function () {
   100 < $(this).scrollTop() ? $("#header").addClass('navbg') : $("#header").removeClass('navbg');
  });
 });

CSS代码

#header{position:fixed;top:0;left:0;width:100%;z-index:100;-webkit-transition: background .4s ease-in-out; -moz-transition: background .4s ease-in-out; -o-transition: background .4s ease-in-out; transition: background .4s ease-in-out;background:0}

.navbg{background:rgba(0,0,0,.5)!important}