Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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).