Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Benjamin Martin
Benjamin Martin
17,582 Points

Using Scroll top to fade in/out an element with responsive height. Additional conflicts with slick jquery plugin.

I know I can use the scrolltop function to fade in and out an element fairly simply. However I don't want to fade it out until it almost off the screen and the height of these elements are the full window height minus the sticky header.

ScrollTop returns the px difference from the top of the element... so I'm quite stumped on how to solve that.

https://w.trhou.se/tz0uj2by7a

I want to fade in and out #bio-page and #contact-page.

I also want to fade out the .slides but it is messing with the slick jquery plug in. After fading out slick it seems like it can't fade out the slide it's on to go to the next slide and gets freaky(glitchey).