javascript - jQuery - How to start a script when the scroll reaches the block? -

i'm using jquery "homemade" script (that found here) , i'de start 1 when scroll reaches tab block (the blue , grey block @ end of page).

here live version

my html :

<section id="block" class="container-fluid block">     <div class="row accordeon">         <div class="blue">             <ul class="nav nav-tabs" id="mytab">               <li class="active"><a href="#deposer">1 - déposez un projet appel d’offre et recevez en moyenne 10 devis</a></li>               <li><a href="#comparer">2 - comparez les devis et négociez librement</a></li>               <li><a href="#choisir">3 - choississez le prestataire que vous voulez, quand vous voulez</a></li>               <li><a href="#payer">4 - payez le prestataire par le moyen de votre choix</a></li>               <li><a href="#evaluer">5 - evaluez le prestataire sur codeur.com</a></li>           </ul>         </div>         <div class="gray">             <div class="tab-content">               <div class="tab-pane active" id="deposer">                 <h4 class="text-left">1 - déposez un projet appel d’offre et recevez en moyenne 10 devis</h4>                 <p>sans même vous inscrire, vous publiez votre projet. il correspond à un appel d'offres auquel les prestataires vont répondre. c'est gratuit et l'inscription se fait automatiquement et simultanément.</p>                 <p>une fois le projet publié sur codeur, les prestataires concernés sont avertis. vous n'avez rien d'autre à faire. vous recevez rapidement des devis gratuits qui seront classés sous la description de votre projet.</p>                 <p>en savoir plus sur le dépot de projet :</p>                 <ul class="unstyled">                     <li><a class="shake" href="#">comment créer mon projet ?<i class="icon-arrow"></i></a></li>                     <li><a class="shake" href="#">comment bien décrire mon projet ?<i class="icon-arrow"></i></a></li>                 </ul>               </div>               <div class="tab-pane" id="comparer">                 <h4 class="text-left">2 - comparez les devis et négociez librement</h4>                 <p>comparez les devis et discutez avec leurs prestataires par messagerie privée, par messagerie instantanée ou par téléphone (si vous le souhaitez). vous pouvez aussi modifier votre projet et donner des précisions aux prestataires. vous négociez librement et mettez les prestataires en concurrence pour obtenir les meilleurs prix et délais et les meilleures prestations.</p>                 <p>en savoir plus sur :</p>                 <ul class="unstyled">                     <li><a class="shake" href="#">comment inviter un prestataire à faire une offre sur mon projet ?<i class="icon-arrow"></i></a></li>                     <li><a class="shake" href="#">comment utiliser la messagerie ?<i class="icon-arrow"></i></a></li>                 </ul>               </div>               <div class="tab-pane" id="choisir">                 <h4 class="text-left">3 - choississez le prestataire que vous voulez, quand vous voulez</h4>                 <p>c'est vous qui décidez quand et si vous sélectionnez un prestataire. vous sélectionnez la personne que vous voulez. c'est très simple, il vous suffit de le sélectionner à partir de la fiche de votre projet.</p>                 <p>choisir un prestataire sur codeur vous permettra de l'évaluer à l'issue de sa prestation. vous pouvez aussi demander, avant de commencer le projet, de signer un devis en bonne et due forme.</p>                 <ul class="unstyled">                     <li><a class="shake" href="#">comment choisir un prestataire pour réaliser mon projet ?<i class="icon-arrow"></i></a></li>                     <li><a class="shake" href="#">pourquoi attribuer un projet sur codeur.com est il plus sûr ?<i class="icon-arrow"></i></a></li>                 </ul>               </div>               <div class="tab-pane" id="payer">                 <h4>4 - payez le prestataire par le moyen de votre choix</h4>                 <p>c'est vous qui décidez comment vous réglez votre prestataire. vous discutez avec lui du moyen de paiement qui vous convient à tous les deux. pour plus de sécurité, vous pouvez bloquer le paiement sur <a href="#">codeur tasks</a> en début de projet, et vous libérez le paiement par étape : à chaque étape réalisée correspond un paiement. cela permet d'éviter la plupart des litiges.</p>               </div>               <div class="tab-pane" id="evaluer">                 <h4>5 - evaluez le prestataire sur codeur.com</h4>                 <p>dès la fin du projet, vous pouvez évaluer le prestataire. votre évaluation sera publiée sur le site et si elle est positive, aidera le prestataire à trouver de nouveaux projets. le prestataire pourra également vous évaluer et ainsi renforcer votre réputation sur codeur.com pour trouver un prestataire lors de la publication d'un prochain projet.</p>               </div>             </div>         </div>     </div> </section> 

my script scrolling :

<!-- show anim on scroll --> <script> $(document).ready(function() { /* every time window scrolled ... */       $(window).scroll( function(){           /* check location of each desired element */           $('.showme').each( function(i){               var bottom_of_object = $(this).offset().top + $(this).outerheight();               var bottom_of_window = $(window).scrolltop() + $(window).height();               /* if object visible in window, fade it */               if( bottom_of_window > bottom_of_object ){                   $(this).animate({'opacity':'1'},500);               }           });       });   });   </script> 

my script tab animation :

<!-- tabs --> <script>     var tabchange = function () {       var tabs = $('.nav-tabs > li');       var active = tabs.filter('.active');       var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');       // use bootsrap tab show method       next.tab('show');     };     // tab cycle function     var tabcycle = setinterval(tabchange, 5000);      // tab click event handler     $('a').on('click', function (e) {       e.preventdefault();       // stop cycle       clearinterval(tabcycle);       // show clicked tabs associated tab-pane       $(this).tab('show');       // start cycle again in predefined amount of time       settimeout(function () {       //tabcycle = setinterval(tabchange, 5000);       }, 15000);   }); </script> 

i think first off need check if object within screen after scroll. if reach object check if statement if object visible , should execute code.

look @ demo , see whole js function.

js

$(window).scroll(function() {     if (checkvisible($('#tester'))) {         alert("visible!!! paste code in if function!")             } else {         // nothing     } }); 

in case be:

$(window).scroll(function() {     if (checkvisible($('#tester'))) {         var tabchange = function () {           var tabs = $('.nav-tabs > li');           var active = tabs.filter('.active');           var next = active.next('li').length ? active.next('li').find('a') : tabs.filter(':first-child').find('a');           // use bootsrap tab show method           next.tab('show');         };         // tab cycle function         var tabcycle = setinterval(tabchange, 5000);          // tab click event handler         $('a').on('click', function (e) {           e.preventdefault();           // stop cycle           clearinterval(tabcycle);           // show clicked tabs associated tab-pane           $(this).tab('show');           // start cycle again in predefined amount of time           settimeout(function () {           //tabcycle = setinterval(tabchange, 5000);           }, 15000);       });             } else {         // nothing     } }); 

hope helps!

---edit:

to solve function called multiple times need unbind scroll event.

add code: $(window).off('scroll');

$(window).on('scroll', function() {         if (checkvisible($('#block'))) {             $(window).off('scroll'); # add             var tabchange = function () {