Integration with a different scroll event

Hello,

The functionality you describe needs to be done in the script that handles the header, not “Page scroll to id”.

If I could see your page and script I might be able to help and provide the js code that could do this.

Hi, the site is not public so I cannot share, and I actually did come up with a solution now, though it is hacky. I will share here anyway just in case you have ideas for improvement.

I realize it is outside the scope of your plugin, but it is related in some way and you may encounter this kind of scenario at some point.

The idea is: when anchor link is clicked, create a temporary blank element, then remove it after a few seconds (when the animation is complete). Then, use a conditional for the sticky header script, checking if that temporary element exists. Like this:

// Add temporary element
$('.links-container a').on('click', function() {
	$('.links-container').append('<div class="links-container-clicked"></div>');
	setTimeout(function() {
		$('.links-container-clicked').remove();
	}, 2000);
});
let lastScrollPosition = 0;
$(document).on('scroll', function(event) {
	const currentScrollPosition = $(this).scrollTop();

	if (currentScrollPosition < lastScrollPosition) {
		// Scrolling up
		if($('.links-container-clicked').length == 0) {
			$('.header').addClass('header-visible');
		}
	} else {
		// Scrolling down
		$('.header').removeClass('header-visible');
	}
	lastScrollPosition = currentScrollPosition;
});

Initially I was imagining using event somehow to return; if the scroll was due to an anchor click, but maybe it’s not possible. I would prefer a cleaner solution that doesn’t involve the temporary element, but if it works it works ??

The idea is correct ??

You could also add/remove a class to the body element instead of creating the temporary element.

A quicker way would be to have a variable to check. I’ll try some code with the plugin’s callback functions to see if I can add such variable (or perhaps a class on the body) and let you know (I’ll most likely push an update in plugin’s development version).

Another idea is to check if the page is being scrolled via animation which is what happens when the links are clicked.

So instead of adding and removing the temporary element, you can try something like this:

if(!$("html,body").is(':animated')){
	$('.header').addClass('header-visible');
}

Let me know if it works

is(':animated') did work! Brilliant – this is much cleaner. Thanks for teaching me something new. All the best.

Awesome! Glad I helped ??