window scroll only one fire

Question

I have one problem, I have chart animation, everything looks ok but... I would like that this code will fire only one, but on every scroll down or up chart are start again. Look, percents description on every scroll are starting again. Is option to fire this code only first scroll? Thank you for help

 $(window).scroll(function() { if ($(this).scrollTop() >= $('.holder').offset().top) { $('.bar').each(function(i) { var $bar = $(this); $(this).append('<span class="count"></span>') setTimeout(function() { $bar.css('width', $bar.attr('data-percent')); }, i * 100); }); $('.count').each(function() { $(this).prop('Counter', 0).animate({ Counter: $(this).parent('.bar').attr('data-percent') }, { duration: 2000, easing: 'swing', step: function(now) { $(this).text(Math.ceil(now) + '%'); } }); }); } }) 

 @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400, 400italic|Montserrat:400, 700); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content:""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } * { box-sizing: border-box; } body { color: #333; -webkit-font-smoothing: antialiased; font-family:"Montserrat", sans-serif; padding: 2%; } .wrap { width: 50%; margin: 0 auto; } h1 { font-family:"Montserrat", sans-serif; font-weight: bold; text-align: center; font-size: 1.5em; padding: .5em 0; margin-bottom: 1em; border-bottom: 1px solid #dadada; letter-spacing: 3px; text-transform: uppercase; } ul li { line-height: 2; font-weight: bold; font-family:"Montserrat", sans-serif; font-size: .85em; text-transform: uppercase; clear: both; } ul li:before { content:"\\2023"; padding: 0 1em 0 0; } .bar { background: #e74c3c; width: 0; margin: .25em 0; color: #fff; position: relative; transition: width 2s, background .2s; clear: both; } .bar:nth-of-type(2n) { background: #ed7669; } .bar .label { font-size: .75em; padding: 1em; background: #3d3d3d; width: 8em; display: inline-block; position: relative; z-index: 2; font-weight: bold; font-family:"Montserrat", sans-serif; } .bar .label.light { background: #575757; } .count { position: absolute; right: .25em; top: .75em; padding: .15em; font-size: .75em; font-weight: bold; font-family:"Montserrat", sans-serif; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <h1>Animated Bar Graphs</h1> <div class="holder"> <div class="bar cf" data-percent="85%"><span class="label">Photoshop</span> </div> <div class="bar cf" data-percent="75%"><span class="label light">Illustrator</span> </div> <div class="bar cf" data-percent="65%"><span class="label">Indesign</span> </div> <div class="bar cf" data-percent="90%"><span class="label light">HTML</span> </div> <div class="bar cf" data-percent="90%"><span class="label">CSS</span> </div> <div class="bar cf" data-percent="80%"><span class="label light">jQuery</span> </div> <div class="bar cf" data-percent="85%"><span class="label light">RWD</span> </div> <div class="bar cf" data-percent="75%"><span class="label">PHP</span> </div> <div class="bar cf" data-percent="80%"><span class="label light">WordPress</span> </div> <div class="bar cf" data-percent="70%"><span class="label">SASS/SCSS</span> </div> </div> </div> 

Answer 1

your script simply appends a span to holder div. so check if it has already a span with count class. if so, continue.

  $(window).on("scroll", function() { if ($(this).scrollTop() >= $('.holder').offset().top) { $('.bar').each(function(i) { var $bar = $(this); if($(this).find('span.count').length !== 0) return; console.log("span is added"); $(this).append('<span class="count"></span>') setTimeout(function() { $bar.css('width', $bar.attr('data-percent')); }, i * 100); $(window).off('scroll'); }); $('.count').each(function() { $(this).prop('Counter', 0).animate({ Counter: $(this).parent('.bar').attr('data-percent') }, { duration: 2000, easing: 'swing', step: function(now) { $(this).text(Math.ceil(now) + '%'); } }); }); } }) 

 @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400, 400italic|Montserrat:400, 700); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content:""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } * { box-sizing: border-box; } body { color: #333; -webkit-font-smoothing: antialiased; font-family:"Montserrat", sans-serif; padding: 2%; } .wrap { width: 50%; margin: 0 auto; } h1 { font-family:"Montserrat", sans-serif; font-weight: bold; text-align: center; font-size: 1.5em; padding: .5em 0; margin-bottom: 1em; border-bottom: 1px solid #dadada; letter-spacing: 3px; text-transform: uppercase; } ul li { line-height: 2; font-weight: bold; font-family:"Montserrat", sans-serif; font-size: .85em; text-transform: uppercase; clear: both; } ul li:before { content:"\\2023"; padding: 0 1em 0 0; } .bar { background: #e74c3c; width: 0; margin: .25em 0; color: #fff; position: relative; transition: width 2s, background .2s; clear: both; } .bar:nth-of-type(2n) { background: #ed7669; } .bar .label { font-size: .75em; padding: 1em; background: #3d3d3d; width: 8em; display: inline-block; position: relative; z-index: 2; font-weight: bold; font-family:"Montserrat", sans-serif; } .bar .label.light { background: #575757; } .count { position: absolute; right: .25em; top: .75em; padding: .15em; font-size: .75em; font-weight: bold; font-family:"Montserrat", sans-serif; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <h1>Animated Bar Graphs</h1> <div class="holder"> <div class="bar cf" data-percent="85%"><span class="label">Photoshop</span> </div> <div class="bar cf" data-percent="75%"><span class="label light">Illustrator</span> </div> <div class="bar cf" data-percent="65%"><span class="label">Indesign</span> </div> <div class="bar cf" data-percent="90%"><span class="label light">HTML</span> </div> <div class="bar cf" data-percent="90%"><span class="label">CSS</span> </div> <div class="bar cf" data-percent="80%"><span class="label light">jQuery</span> </div> <div class="bar cf" data-percent="85%"><span class="label light">RWD</span> </div> <div class="bar cf" data-percent="75%"><span class="label">PHP</span> </div> <div class="bar cf" data-percent="80%"><span class="label light">WordPress</span> </div> <div class="bar cf" data-percent="70%"><span class="label">SASS/SCSS</span> </div> </div> </div> 

Answer 2

You can just use .on and unlink the event inside:

 $(window).on('scroll',function() { if ($(this).scrollTop() >= $('.holder').offset().top) { $('.bar').each(function(i) { var $bar = $(this); $(this).append('<span class="count"></span>') setTimeout(function() { $bar.css('width', $bar.attr('data-percent')); }, i * 100); }); $(window).off('scroll'); $('.count').each(function() { $(this).prop('Counter', 0).animate({ Counter: $(this).parent('.bar').attr('data-percent') }, { duration: 2000, step: function(now) { $(this).text(Math.ceil(now) + '%'); } }); }); } }); 

 @import url(http://fonts.googleapis.com/css?family=Droid+Serif:400, 400italic|Montserrat:400, 700); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; } html { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; } q, blockquote { quotes: none; } q:before, q:after, blockquote:before, blockquote:after { content:""; content: none; } a img { border: none; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } * { box-sizing: border-box; } body { color: #333; -webkit-font-smoothing: antialiased; font-family:"Montserrat", sans-serif; padding: 2%; } .wrap { width: 50%; margin: 0 auto; } h1 { font-family:"Montserrat", sans-serif; font-weight: bold; text-align: center; font-size: 1.5em; padding: .5em 0; margin-bottom: 1em; border-bottom: 1px solid #dadada; letter-spacing: 3px; text-transform: uppercase; } ul li { line-height: 2; font-weight: bold; font-family:"Montserrat", sans-serif; font-size: .85em; text-transform: uppercase; clear: both; } ul li:before { content:"\\2023"; padding: 0 1em 0 0; } .bar { background: #e74c3c; width: 0; margin: .25em 0; color: #fff; position: relative; transition: width 2s, background .2s; clear: both; } .bar:nth-of-type(2n) { background: #ed7669; } .bar .label { font-size: .75em; padding: 1em; background: #3d3d3d; width: 8em; display: inline-block; position: relative; z-index: 2; font-weight: bold; font-family:"Montserrat", sans-serif; } .bar .label.light { background: #575757; } .count { position: absolute; right: .25em; top: .75em; padding: .15em; font-size: .75em; font-weight: bold; font-family:"Montserrat", sans-serif; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <h1>Animated Bar Graphs</h1> <div class="holder"> <div class="bar cf" data-percent="85%"><span class="label">Photoshop</span> </div> <div class="bar cf" data-percent="75%"><span class="label light">Illustrator</span> </div> <div class="bar cf" data-percent="65%"><span class="label">Indesign</span> </div> <div class="bar cf" data-percent="90%"><span class="label light">HTML</span> </div> <div class="bar cf" data-percent="90%"><span class="label">CSS</span> </div> <div class="bar cf" data-percent="80%"><span class="label light">jQuery</span> </div> <div class="bar cf" data-percent="85%"><span class="label light">RWD</span> </div> <div class="bar cf" data-percent="75%"><span class="label">PHP</span> </div> <div class="bar cf" data-percent="80%"><span class="label light">WordPress</span> </div> <div class="bar cf" data-percent="70%"><span class="label">SASS/SCSS</span> </div> </div> </div>