Only fire a function once on scroll

Question

So, I'd like to fire a function only once on scroll.

The problem is that I don't get to fire the function only once. I've tried different solutions ( .on(), setting a counter, setting it outside/inside the window.scrollstop function) but nothing worked.

It does work... but it works whenever I scroll! :(

I don't think it's difficult, but.. I didn't get to make it work so far.

here's my code:

$(window).scroll(function(){
    $('.sr-icons').toggleClass('scrolled', $(this).scrollTop() > 950);  
});

CSS:

.sr-icons.scrolled {
  opacity: 0.2;
}

and HTML:

<div class="container">
        <div class="row">
          <div class="col-lg-3 col-md-6 text-center">
            <div class="mt-5 mx-auto">
              <i class="fa fa-4x fa-superpowers text-primary mb-3 sr-icons"></i>
              <h3 class="mb-3 text-dark">Sturdy Templates</h3>
              <p class="text-muted mb-0">Our templates are updated regularly so they don't break.</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center">
            <div class="mt-5 mx-auto">
              <i class="fa fa-4x fa-paper-plane text-primary mb-3 sr-icons"></i>
              <h3 class="mb-3 text-dark">Ready to Ship</h3>
              <p class="text-muted mb-0">You can use this theme as is, or you can make changes!</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center">
            <div class="mt-5 mx-auto">
              <i class="fa fa-4x fa-newspaper-o text-primary mb-3 sr-icons"></i>
              <h3 class="mb-3 text-dark">Up to Date</h3>
              <p class="text-muted mb-0">We update dependencies to keep things fresh.</p>
            </div>
          </div>
          <div class="col-lg-3 col-md-6 text-center">
            <div class="mt-5 mx-auto">
              <i class="fa fa-4x fa-cog fa-spin text-primary mb-3 sr-icons"></i>
              <h3 class="mb-3 text-dark">I Work For You</h3>
              <p class="text-muted mb-0">Just think about any website you want to have, I will make that a reality.</p>
            </div>
          </div>
        </div>
      </div>

@Lain No. That is the fun part. It only triggers once. And then removes the `event handler`. — deEr., May 09 '18 at 14:32
So mark that the code ran once when it has met the condition. — epascarello, May 09 '18 at 14:32
Have you tried this link? [possibly duplicated question](https://stackoverflow.com/questions/16873352/only-fire-a-function-once-on-scroll-scrollstop?rq=1) — , May 09 '18 at 14:35
Instead of `So, I'd like to fire a function only once on scroll.` it should read `So, I'd like to fire a function on scroll until...` — Nope, May 09 '18 at 14:51

Logar · Answer 1 · 2018-05-09T14:54:28.557

1

If I understood you, you can do something like :

$(window).on('scroll', function(){
    if($(this).scrollTop() > 950) {
        $('.sr-icons').toggleClass('scrolled', true);
        $(window).off('scroll');
    }
});

As said in other comments, you should check wether you want $(this).scrollTop() > 950 or $(this).scrollTop() < 950

Edit : A more proper solution would be to remove only that specific handler, so you can attach other events on scroll if you ever want to :

var handler = function(){
    if($(this).scrollTop() > 950) {
        $('.sr-icons').toggleClass('scrolled', true);
        $(window).off('scroll', handler);
    }
}
$(window).on('scroll', handler);

edited May 09 '18 at 14:54

answered May 09 '18 at 14:43

Logar

1,248
9
17

1

Small typo `$(window).off('scroll');`. – deEr. May 09 '18 at 14:45
Aha! YOU COMPLETELY ROCK Logar! you got it mate! It worked like a charm! thank you loads :) And thank you for the other way to do it as well! – Marcell May 09 '18 at 14:54
@Marcell glad it helped ;) check the updated answer though, might be useful in the future – Logar May 09 '18 at 14:54
@Logar, I did! wrote it down here to properly learn! Thanks a bunch once again mate! – Marcell May 09 '18 at 14:56
@Marcell good ;) Feel free to mark as resolved if you have your solution – Logar May 09 '18 at 14:58

score 0 · Answer 2 · answered May 09 '18 at 14:33

0

You can use a flag variable, initially 0, then increment on scroll. Then you can add check as

var flag=0;
$(window).scroll(function(){  
if(flag==0){
$('.sr-icons').toggleClass('scrolled', $(this).scrollTop() > 950); 
flag++;
}
});

answered May 09 '18 at 14:33

Mesar ali

1,832
2
16
18

Funny thing, it only works like that if I'm at the right scrollTop() position and refresh! But if I am at the beginning of the page and then scroll down up to where the animation need to fire....it doesnt! O_o – Marcell May 09 '18 at 14:38
it happened because page scroll event already fired once, so it'll no allow to execute that code again. You can set flag to 0 on document.ready(after page load completed) – Mesar ali May 09 '18 at 14:45

Only fire a function once on scroll

2 Answers2