Task: visitor scrolled down to a certain place on the page - the function was executed (the call was made only once, because the execution is long and resource-intensive). How to do this with jquery? $ (window) .scroll (function () {show_graphics ();}); - will perform the "every scroll" function

in the function itself, we check the position of the scroll, compare it with the position of the element, if the first is greater than the second, we perform the function. But how to execute it ONLY ONE ONE?

  • Do you want to trigger an event only if the position of the scroll has become n? It's impossible. If the check is really very hard, make it asynchronous via srtTimeout, but most likely you just need to optimize this check. In general, do an example and then you can advise something. - zb '
  • and here it is: api.jquery.com/one - Elena Levina
  • @ Elena Levina, one and unbind (after the first triggering) on ​​the scroll is absolutely meaningless, I think the vehicle wants what I wrote and not to intercept the only scroll event. - zb '
  • one - yes, for sure. But the function call and unbind can also be done by condition by checking the scrollTop. - Elena Levina

3 answers 3

You can delete the event handler in the function itself: http://api.jquery.com/off/

    I tried your options, spat out a little and came to my, simple as a boot, but without failing to work.
    (Shl. I compared " if the scroll is more than the beginning of the #skills section ").

    1. Outside the scrolling function, added to the element that will work once the class animate.
    2. Inside the scrolling function, I set the action on this element with the class animate.
    When the function is executed, I delete the class animate. Everything worked once and no longer soars, everyone is happy :)

    $('.skill_item div').addClass('animate'); $(document).scroll(function(){ if( $(document).scrollTop() >= $('#skills').offset().top ) { $('.skill_item div.animate').each(function(){ // что-то делаем и... $(this).removeClass('animate'); }); } });

      It's pretty simple, you need to give the name of this anchor and anbid it after execution:

       $(window).bind('scroll.once', function(){ show_graphics(); }); function show_graphics() { //run code $(window).unbind('scroll.once') };