dynamicHeader.js

const headerSticky = document.querySelector('#stickyheaders');
const headerUP = document.querySelector('.headerup');
const styles = {
  sticky: {
        transition : 'transform 0.34s ease'
    },
  up: {
        transform: 'translateY(-80px)'
    },
};

const getStyles = obj => Object.keys(obj).map(key => `${key}:${obj[key]}`).join(';');

// assign directly to cssText

headerSticky.style.cssText = getStyles(styles.sticky);
headerUP.style.cssText = getStyles(styles.up);

	document.addEventListener('DOMContentLoaded', function() {
		jQuery(function($) {
			var mywindow = $(window);
			var mypos = mywindow.scrollTop();
			let scrolling = false; /* For throlling scroll event */
			window.addEventListener('scroll', function() {
				scrolling = true;
			});
			setInterval(() => {
				if (scrolling) {
					scrolling = false;
					if (mypos > 40) {
						if (mywindow.scrollTop() > mypos) {
							$('#stickyheaders').addClass('headerup');
						} else {
							$('#stickyheaders').removeClass('headerup');
						}
					}
					mypos = mywindow.scrollTop();
				}
			}, 300);
		});
	});