LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

This is Header
CSS
      * {margin:0;padding:0}
      html {
          background: lightgray;
          height: 125vh;
      }
      .header {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          padding: 0;
          z-index: 10000;
          transition: all 0.2s ease-in-out;
          height: auto;
          background-color:transparent;

          text-align: center;
          line-height: 40px;
      }
      .header.active {
          background: #fff;
          -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
          -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
          box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
      }
JS
$(window).on("scroll", function() {
          if($(window).scrollTop() > 50) {
              $(".header").addClass("active");
          } else {
              //remove the background property so it comes transparent again (defined in your css)
             $(".header").removeClass("active");
          }
      });
Term
Sat, 04/14/2018 - 20:48

Related Codes

Pen ID
Pen ID
Square Adv