Styjun

I'm working with a Drupal 8.x template and I need to modify a sticky header that it get activated onscroll.

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...)

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.

These are the two codes i found that make the sticky header work. Hope someone can help me!

CSS

.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 > .row > div 
 display: none;
 
 .onscroll .header__container > .row > div:last-of-type 
 display: block;
 
 .onscroll .header-container .content > ul.menu 
 padding-top: 10px;
 

@media (max-width: 767px) 
 .onscroll .header.js-fixed 
 display: none;
 

JavaScript

(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() > 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);

It looks like you need to add the background color to the .header css class before the .onscroll class is added by javascript. Maybe adding this to your css might do it:

.header 
 background-color: rgba(244, 244, 244, 0.95);

If that's not working, try adding it with !important like so:

.header 
 background-color: rgba(244, 244, 244, 0.95) !important;