JQuery onScroll animation

Question

I have an onScroll animation that makes my header text fade to .8 opacity when the user scrolls :

let header = $('header');

$(document).on('scroll',function(){

    header.fadeTo(600,.8);
  });

I want the opacity to fade back to 1 when the user stop scrolling and I don't know how to do that.

Is there a way to setup a function that returns a boolean when the user scrolls ?

Thanks for your help!

N. Ivanov · Answer 1 · 2020-11-10T13:51:20.820

I am not sure how much this would help, as I haven't tested it (if you could provide a jfiddle or even a working example here). But just from the top of my brain you could possibly use the callback of fadeTo, so the code should be something of the sort:

header.fadeTo(600,.8, function(){
    // here bring back opacity to 1
});

Hopefully this helps!

$('body').on('click', '#test', function(){

    $('#test').fadeTo(600,.1, function(){
      $('#test').fadeTo(100, 1);
    });
});

#test{
    background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test">hello</div>

Here is a quick basic example I built just now as I don't have time at the moment to look deeper. So when you run it, if you click the yellow div it will fade to what you need it and once done it will revert back to original opacity. Hopefully this example helps you. I assume it will be similar with scroll etc. Thanks!

also a less hacky way probably refer to this answer: https://stackoverflow.com/a/14092859/7654934 — N. Ivanov, Nov 10 '20 at 13:47
Thanks, the problem with that function is that it will trigger everytime the user scrolls, so the opacity will vary between the two values during the scrolling. What I want is that the opacity varies to .8 when the user scrolls, and get back when the user does not scroll. This I don't know how to do ... — Enyak Stew, Nov 10 '20 at 14:03

score 0 · Answer 2 · answered Nov 10 '20 at 14:46

I've managed to do what I wanted using this code :

let header = $('header')

    $( window ).scroll(function() {
                     header.css('opacity','.8');
                    clearTimeout( $.data( this, "scrollCheck" ) );
                    $.data( this, "scrollCheck", setTimeout(function() {
                        header.css('opacity','1');
                    }, 250) );
              });

Based on some code from this link : check if user stops

Thanks to @N. Ivanov for the tips !

JQuery onScroll animation

2 Answers2