when the sticky menu is active

Hi there,

I'm not sure I fully understand what you mean.

To clarify: Do you want to remove is_stuck and replace it with something else?

If so, I'm afraid you can't do that without editing the script as this baked into the GP Premium plugin's /menu-plus/functions/js/sticky.js.

Or do you want to add more classes along with is_stuck?
If this is the case, you can write a simple script that checks if the target element contains is_stuck class and add your own ones there's one.

example:

<script>

document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
	var siteNav = document.querySelector('.stuckElement');

		if(document.contains(siteNav)){
			if( siteNav.classList.contains('is_stuck') ){
				siteNav.classList.add('your-class');	
			} if( !siteNav.classList.contains('is_stuck') ){
				siteNav.classList.remove('your-class');	
			}
		} 
	
}, false);
</script>

Adding class to element works correctly when stuckElement is_stuck. But removing the class from the element doesn't work properly. Thank you.

document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
	var siteNav = document.querySelector('.stuckElement');	
		if(document.contains(siteNav)){
			if( siteNav.classList.contains('is_stuck') ){
				siteNav.classList.add('your-class');	
               $('.inside-page-hero').addClass('new-is_stuck');				
			} if( !siteNav.classList.contains('is_stuck') ){
				siteNav.classList.remove('your-class');	
			    $('.inside-page-hero').removeClass('new-is_stuck');	
			}
		} 
	
}, false);

I believe this is sorted?

No problem. :D

thanks. problem solved

const secondaryNav = document.querySelector('nav#secondary-navigation');

var lastScrollTop = 0;

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
		var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
		var siteNav = document.getElementById('sticky-navigation');
		if (st > lastScrollTop){
      if(document.contains(siteNav)){
				if( siteNav.classList.contains('sticky-navigation-transition') ){
					var sn_height = siteNav.offsetHeight;
					console.log(sn_height+"stickyNavTransitioned");
					secondaryNav.style.position = "fixed";
					secondaryNav.style.top = sn_height+'px';
					secondaryNav.style.transition = "1s";
					secondaryNav.classList.add('fadein');
				}
			} else if( !siteNav.classList.contains('sticky-navigation-transition')){
				console.log("not transitioned");
			}
		} else {
			console.log("scrolling up "+st);
			if(window.scrollY==0){ 
			 	console.log("Top of page");
				secondaryNav.style.position = "relative";
				secondaryNav.style.top = "0px";
				secondaryNav.classList.remove('fadein');
			}
		}
	
		lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);

Nice one. Thanks for letting us know.

PS. I see you've expanded on that and added animations to it as well. Good one! thanks for sharing that. :D