Java Scroll up Fade In, Stay While scrolling, Scroll Up Fade Out

Question

I would like different elements to fade in as they reach the center of the screen (bottom to middle of screen) when scrolling, stay put while continuing to scroll, and then fade out as they scroll off the top of the screen.

I can stop the element from scrolling at a certain put and use a fade in/out effect.

The issues I am having are getting the element to continue scrolling again after stopping, as well as controlling the beginning and end points of the opacity change.

$(window).scroll(function(){
    $("#theFixed").css("top",Math.max(150,450-$(this).scrollTop()));
});

$(document).ready(function(){
    $(window).scroll(function(){
        $("#theFixed").css("opacity", 0 + $(window).scrollTop() / 1200);
    });
});

<div id="theFixed" style="position:fixed;top:450px;background-color:red" >SOMETHING</div>

STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>STUFF <BR>

Please use the comments to ask for clarification and not edit the answer. — jmattheis, Nov 24 '17 at 18:02

score 0 · Answer 1 · edited Nov 24 '17 at 18:03

0

Use ScrollMagic, for this check this example.

edited Nov 24 '17 at 18:03

jmattheis

10,494
11
46
58

answered Nov 24 '17 at 17:19

Pushparaj

1,072
8
29

It looks good but I can't get it to work when I use the source code provided. Do I need to add a plugin? Im trying to keep this simple, otherwise I can go find plugins that work. – Nel Nov 24 '17 at 17:45
Im uploading it and will give it a go – Nel Nov 24 '17 at 17:50

Java Scroll up Fade In, Stay While scrolling, Scroll Up Fade Out

1 Answers1

Linked