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

CSS

Posted by Sam Lillicrap
Sam Lillicrap
12,127 Points

Way of changing opacity on scroll without jQuery/javascript?

Hi guys,

I'm looking for a way to fade out a UI element as the user starts to scroll down the screen. I know how to do this using jQuery however the onScroll function works well on desktop browsers as it's constantly checking to see whether it needs to fire an event - but with mobile browsers the javascript is paused on scroll making the code buggy or useless.

So the only other method I can think of is by using css transitions with opacity somehow? Bit of a long shot but maybe someone has a solution? :-)

Thanks -Sam

Neil Little
Neil Little
5,555 Points

I would look into the jQuery version, its late at night but personally I would do:

CSS:

.ui-element{
    element position, location, size.....
    background-color:whatever;
    transition:background-color .4s ease;
}

.ui-element.scroll{
    background-color:lighter shade or transparency ?;
}

jQuery:

$(.ui-element).toggleClass("scroll"); // Or add class and remove class within an if statement

I have yet come across a solution for on scroll triggering a jQuery function or specific code.. I will look into this when I have time.

Here are some searches I found:

  1. http://jsfiddle.net/JdbhV/6/

I prefer using CSS but jQuery is pretty sweet. You need to ask yourself how far down does the user need to scroll prior fade and to you want to fade back in at a certain point.

Hope this helps...

Neil Little
Neil Little
5,555 Points

UPDATE: MISSING TAGS & SPELLING :(

$(".ui-element").toggleClass("scroll"); // Or .addClass / .removeClass within an if statement