custom js question

[DLB]

Hey Armin,

I’m working on some updates to a site, I’ve added a footer for one particular page which has some text positioned in the bottom right corner, which acts as ‘close’ (back to previous page) button.

I‘ve added some JS in the ‘Custom CSS & HTML’ section, which makes the footer ‘close’ text appear after you have scrolled 75% of the page. However there appears to be a ‘bug’ with my code, as the ‘close’ text appears as soon as the page loads, but disappears as soon as you start scrolling, but then appears as it should do after 75% of the page is scrolled. Is there a way I can make the ‘close’ text not appear on page load (or on a page refresh)? I guess I must have missed something with the code?!

Thanks, D

url: https://www.helenfelcey.co.uk/info-and-contact/

js:

	jQuery(document).scroll(function() {
		var scrollPercent = 100 * jQuery(window).scrollTop() / (jQuery(document).height() - jQuery(window).height());
		if (scrollPercent > 75) {
			jQuery('#footer-region').fadeIn();
		} else {
			jQuery('#footer-region').fadeOut();
		}});
</script>

[arminunruh]

function myscroll() {
	var scrollPercent = 100 * window.scrollY / (jQuery(document).height() - jQuery(window).height());
	if (scrollPercent > 75) {
		jQuery('#footer-region').fadeIn();
	} else {
		jQuery('#footer-region').fadeOut();
	}
}

window.laytheme.on("newpageshown", function(){
	jQuery(document).on('scroll', myscroll);
})

window.laytheme.on('before_content_replacement', function(){
	jQuery(document).off('scroll', myscroll);
})

does this work maybe?

[DLB]

Thanks for looking into this @arminunruh – still getting the same issue as before with the new code, unfortunately. The footer text still appears on page load (and when refreshed). Any thoughts?

[arminunruh]

oh yea so the text needs to be hidden by default

you can use css to have it hidden at the start

in lay options → custom css & html → custom css:

#footer-region{
opacity: 0;
}