title: CSS sticky header onscroll
body: <p>I'm working with a Drupal 8.x template and I need to modify a sticky header that it get activated onscroll.</p>
  
  <p>The header is transparent when the page load and ones the user scroll down it has a white background and it get stuck at the top of the page (just as a sticky header normally works...)</p>
  
  <p>What I want to do it's to modify the code so it won't start transparent. I need it to have the white background from the start, as soon as the page loads and of course with the sticky function.</p>
  
  <p>These are the two codes i found that make the sticky header work. Hope someone can help me!</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.onscroll.transparent-header-active .header-container.js-transparent-header .sticky-wrapper {
    height: 0 !important;
  }
  .onscroll .header.js-fixed {
    position: fixed;
    z-index: 499;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0 2px 14px rgba(100, 100, 100, 0.1), 0 2px 2px rgba(100, 100, 100, 0.1);
    box-shadow: 0 2px 14px rgba(100, 100, 100, 0.1), 0 2px 2px rgba(100, 100, 100, 0.1);
  }
  .onscroll .header.js-fixed.region--white-background {
    background-color: rgba(255, 255, 255, 0.95);
  }
  .onscroll .header.js-fixed.region--black-background {
    background-color: rgba(29, 29, 29, 0.95);
  }
  .onscroll .header.js-fixed.region--gray-background {
    background-color: rgba(244, 244, 244, 0.95);
  }
  .fixed-header-enabled.onscroll .header__container,
  .fixed-header-enabled.onscroll .header-second,
  .fixed-header-enabled.onscroll .header-third,
  .fixed-header-enabled.onscroll .header-first,
  .fixed-header-enabled.onscroll .header-container ul.menu {
    -webkit-transition: ease-in-out 0.2s;
    -o-transition: ease-in-out 0.2s;
    transition: ease-in-out 0.2s;
  }
  .fixed-header-enabled.onscroll .header__container {
    padding: 5px 0;
  }
  .fixed-header-enabled.onscroll .header__section ul.menu {
    padding-top: 10px;
  }
  .fixed-header-enabled.onscroll .header__section .field--mt-dropdowns-block {
    padding-top: 14px;
  }
  @media (max-width: 991px) {
    .onscroll .header__container &gt; .row &gt; div {
      display: none;
    }
    .onscroll .header__container &gt; .row &gt; div:last-of-type {
      display: block;
    }
    .onscroll .header-container .content &gt; ul.menu {
      padding-top: 10px;
    }
  }
  @media (max-width: 767px) {
    .onscroll .header.js-fixed {
      display: none;
    }
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>(function ($, Drupal) {
    Drupal.behaviors.mtWaypointsFixedHeader = {
      attach: function (context, settings) {
        $(context).find(".header-container .header").once('mtWaypointsFixedHeaderInit').each(function(index, item) {
          var sticky = new Waypoint.Sticky ({
            element: $('.header-container .header')[0],
            stuckClass: 'js-fixed',
            handler: function(direction) {
              if (Waypoint.viewportWidth() &gt; 752) {
                $('body', context).toggleClass('onscroll');
              } else {
                $('body', context).removeClass('onscroll');
              }
              var topValue = $('body').css('padding-top');
              $(".header.js-fixed").css("top", topValue);
            },
            offset: function() {
              var offsetValue = parseInt($('body').css('padding-top')) - 1;
              return offsetValue;
            }
          });
        });
      }
    };
  })(jQuery, Drupal);
  </code></pre>