javascript - Gradually appear/fade in HTML element as you scroll down/up -

i'm trying create following effect:

1. unless you've scrolled down 100 px or more, won't see element (e.g. div).
2. when you've scrolled 100 px, , keep scrolling, in smooth way div element appear, , it'll have shown when you've scrolled 200 px.

this means won't appear transition effect. rather, if let's scroll 150 px, can see div element transparent effect (50% since @ 100 px starts fade in , @ 200 px has shown up). if scroll 175 px, can see div more. , if reach 200 px , continue scrolling down, div stay visible.

same up: if scroll it'll gradually disappear.

this android page: header in top of screen appear gradually , stay @ top (using position: fixed;).

only last thing have clarify making effect mean css change: @ 120 px opacity going have 0.2 (20% visible), @ 155 of 0.55, @ 183 of 0.83.

note: it's possible! i've seen before! =)

if understand right try this:

$( window ).scroll(function() {     var top = $( window ).scrolltop( );     var opacity = (top-100)/100;         fixedelement.css("opacity",opacity); }); 

demo:

https://jsfiddle.net/8zhlgjsj/1/