Fade out ID when scroll up

Question

this code works well with scrolling down but im trying to make works as well to fade out the id when scroll up.

<script>
tiles = $("#widgeted-title1").fadeTo(0, 0);

$(window).scroll(function(d,h) {
tiles.each(function(i) {
    a = $(this).offset().top + $(this).height();
    b = $(window).scrollTop() + $(window).height();
    if (a < b) $(this).fadeTo(500,1);
});
});
</script>

According to the rule that `#` (*ID*) **must be unique**, there's no absolute need to run a `.each()` where all you have is a single element. — Roko C. Buljan, Mar 16 '15 at 03:22
can you please show the CSS you have for your `#widgeted-title1` ? It might help me to understand what you're trying to accomplish exactly. — Roko C. Buljan, Mar 16 '15 at 03:34
here is it #widgeted-title1{display: inline-block;} im trying to fade in this div when the browser reaches the div and when scroll up it fade out — user2972389, Mar 16 '15 at 03:37
In other words, when `#widgeted-title1` is near the top of the window, you want it to fade out? — Roko C. Buljan, Mar 16 '15 at 03:41
the #widgeted-title1 is in the middle of the page, so when i scroll down and reach its level i want it to fade in and if i scroll up it must fade out — user2972389, Mar 16 '15 at 03:43
what I don't understand is: if you scroll up, the element will fade in but it will not be visible cause off-screen. — Roko C. Buljan, Mar 16 '15 at 03:52
yes thats what i mean, whenever i scroll down i need to fade in, and when scroll up and down again i need to animate the fadding in again — user2972389, Mar 16 '15 at 03:53
you mean something like this? http://jsbin.com/valiga/1/edit?html,css,js,console,output — Roko C. Buljan, Mar 16 '15 at 03:55
Or you can take also a look at this demo http://jsfiddle.net/tw6g2oeu/18/ that uses a plugin I've created in this answer: http://stackoverflow.com/a/27462500/383904 — Roko C. Buljan, Mar 16 '15 at 03:59
yes but i hope i doesnt specify the offsite with numbers, cuz each time the div gonna be in a specific place in the page , check this pafe and scroll down to the sidebar picture and you see http://www.smartpassiveincome.com/blog/ — user2972389, Mar 16 '15 at 04:00
so tell me you want to recreate the exact thing like on that page?! — Roko C. Buljan, Mar 16 '15 at 04:02

score 0 · Answer 1 · answered Mar 16 '15 at 04:10

0

If your code works (for the fade-in) than all you need is:

var tiles = $("#widgeted-title1").fadeTo(0, 0);

$(window).on("scroll resize", function() { // do it also on resize!
    var a = tiles.offset().top + tiles.height();
    var b = $(this).scrollTop() + $(this).height();
    tiles.stop().fadeTo(500, a<b ? 1 : 0);
});

answered Mar 16 '15 at 04:10

Roko C. Buljan

196,159
39
305
313

great one it just fade out quick on scroll up even before i leave the zone of the #widgeted-title1 – user2972389 Mar 16 '15 at 04:12
@user2972389 please create a demo so I can take a look at it. – Roko C. Buljan Mar 16 '15 at 04:57

Fade out ID when scroll up

1 Answers1