Scrolltrigger - Show header when the bottom of page is reached

[raumzeit 1 Likes (Newbie)]

Hello GSAP-friends,

 

I have animated my header to hide when scrolled down and show again when scrolled up. Actually I have just copied the code I found in the demos and modified it just a little bit. I would like the header to be visible again, when the user has scrolled to the very end of the page. I was unsuccesful with determining it with the if condition -- jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height() --.

Is this functionality possible with Scrolltrigger? Here is what I have so far:

 

gsap.registerPlugin(ScrollTrigger);

let header = jQuery(".header");
let btn = jQuery('.custom-menu-toggle');


const showAnim = gsap.from('.header', { 
	yPercent: -100,
	paused: true,
	duration: 0.2,
}).progress(1);

ScrollTrigger.create({
	start: "top top",
	end: "max",
	onUpdate: (self) => {
    	if(self.direction === -1) {
			showAnim.play();
		} else if (jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
        	showAnim.reverse();
    	} else{
			showAnim.reverse();
		}
	}
	
});;

ScrollTrigger.config({
	autoRefreshEvents: "visibilitychange,DOMContentLoaded,load"
});

 

[GreenSock 18,252 Likes (Superhero)]

Here's how I'd approach it: 

See the Pen YzaymEm?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Does that help?

[raumzeit 1 Likes (Newbie)]

Hey GreenSock, 

 

thank you for your answer. I've tried and it didn't work for me. But I think the code should be working usually, so there must be something wrong with my website.

After some googling, I found out it had something to do with my html and body heights set to 100%. Unfortunately I cannot change these values, since then some z-indexed links are not working. When I console logged jQuery("html").scrollTop() though, it seemed to log out the right value or at least a "righty" value. When I logged out console.log(ScrollTrigger.maxScroll(window)), it returned the same value but only after scrolling. It is a little complicated and it is almost midnight here, can I pm you my website and you inspect it? 

[GreenSock 18,252 Likes (Superhero)]

We can't really troubleshoot a live site effectively - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Thee are SOOO many factors in a live site and we can't really tinker like we could in a minimal demo on CodePen or CodeSandbox. 

 

I don't mind if you want to send me a link, but it probably won't do much good and I don't have time to dig through thousands of lines of code hunting for an issue on a live site. It kinda sounds like you may have some 3rd party library that is messing with your site's structure and page height based on scroll.

 

Typically the best way to troubleshoot is isolate, isolate, isolate. Start super basic with a few colored <div> elements and slowly build up from there until it breaks. That's what CodePen is great for. 

[raumzeit 1 Likes (Newbie)]

Hey just wanted to let you know, that I finally figured out what the issue was. First of all, I loaded the code when the document was ready, which I had completely forgotten about somehow and since the code was executed before even the document was loaded, there were issues with the calculation of the window scroll height.

And secondly, I have a contact form built with a plugin, which loads a js-file, that I had been lazy-loading with the plugin flying scripts and that caused some conditional fields of the form to always show on page-load, since the js-file was lazy-loaded and hide again when the js-file was loaded, which again caused issues with the calculation of the scroll height. 

I have used a document ready function for the gsap-code and set the form fields to display: none; by default. That fixed the problem.

That took my whole day lol.

[GreenSock 18,252 Likes (Superhero)]

Glad you figured it out. Good job! 🎉