javascript - How to stop the child from inheriting the parent opacity -

i having trouble figure out how stop child elements inheriting parent opacity.

i know has been answered before, setting background instead of opacity values. scenario different in sense have use fade in effect in sticky headers contain child elements.

when add fade in, children gets same effect.

here test code:

$('.nav-items').css('opacity', '0.3');    var top_nav = $("body, html").scrolltop();    (function () {      var $win = $(window);        $win.on('scroll', function () {            var header = $(".nav-items");          if ($(this).scrolltop() > 40) {              if (!header.data('faded')) header.data('faded', 1).not('nav-item li').stop(true).fadeto(400, 1);          } else if (header.data('faded')) {              header.data('faded', 0).stop(true).fadeto(400, 0.3);          }      });  }).call(this);

body {      margin:0;      padding:0;  }  .nav-items {      font-weight: 900;      background-color: rgba(0, 0, 0, 1);      position: fixed;      width: 100%;      top: 0;      z-index: 1000;  }  .nav-items ul {      max-width: 960px;      margin: 0;      padding: 0;      margin: 0 auto;  }  .nav-items ul li {      cursor: pointer;      margin: 0;      padding: 20px 45px;      width: 19%;      font-weight: 400;      text-align: center;      display: inline-block;      box-sizing: border-box;      color: #fff;      vertical-align: top;      text-transform: uppercase;  }  .nav-items ul li.bigger {      cursor: default;      text-transform: lowercase;      width: 20%;      padding: 0;      height: inherit;      position: relative;      top: 15px;      /* vertical-align: bottom; */  }  .nav-items ul li.bigger img {      height: 50px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>  <div class="nav-items">      <ul>          <li id="l_1">how works</li>          <li id="l_2">how driver</li>          <li id="l_3">the community</li>          <li id="l_4">contact us</li>      </ul>  </div>  <div>lorem ipsum lorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem ipsumlorem</div>

you cannot stop layers inheriting opacity. workaround set rgb background colors. if child elements inherit too, can override using css.

/* fallback web browsers don't support rgba */ background-color: rgb(0, 0, 0); /* rgba 0.6 opacity */ background-color: rgba(0, 0, 0, 0.6); /* ie 5.5 - 7*/ filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#99000000, endcolorstr=#99000000); /* ie 8*/ -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr=#99000000,endcolorstr=#99000000)";