jquery数字计数到目标数字并点击弹出显示

Question

我有一个网站：my website  我已经为团队中的点构建了一个 jQuery计数器来计算目标数。点击团队选项卡。

问题：

1. 当我加载页面时，jquery点数工作正常。让我们说当你去团队部分并刷新页面。但是当我滚动浏览各个部分并到达团队部分时，效果不会显示出来。它看起来像普通数字。当用户滚动到＆＃34;团队＆＃34;部分显示效果的数字计数。

该部分的代码：

＆＃13;
＆＃13;
(function ($) {
	$.fn.countTo = function (options) {
		options = options || {};

		return $(this).each(function () {
			// set options for current element
			var settings = $.extend({}, $.fn.countTo.defaults, {
				from:            $(this).data('from'),
				to:              $(this).data('to'),
				speed:           $(this).data('speed'),
				refreshInterval: $(this).data('refresh-interval'),
				decimals:        $(this).data('decimals')
			}, options);

			// how many times to update the value, and how much to increment the value on each update
			var loops = Math.ceil(settings.speed / settings.refreshInterval),
				increment = (settings.to - settings.from) / loops;

			// references & variables that will change with each update
			var self = this,
				$self = $(this),
				loopCount = 0,
				value = settings.from,
				data = $self.data('countTo') || {};

			$self.data('countTo', data);

			// if an existing interval can be found, clear it first
			if (data.interval) {
				clearInterval(data.interval);
			}
			data.interval = setInterval(updateTimer, settings.refreshInterval);

			// initialize the element with the starting value
			render(value);

			function updateTimer() {
				value += increment;
				loopCount++;

				render(value);

				if (typeof(settings.onUpdate) == 'function') {
					settings.onUpdate.call(self, value);
				}

				if (loopCount >= loops) {
					// remove the interval
					$self.removeData('countTo');
					clearInterval(data.interval);
					value = settings.to;

					if (typeof(settings.onComplete) == 'function') {
						settings.onComplete.call(self, value);
					}
				}
			}

			function render(value) {
				var formattedValue = settings.formatter.call(self, value, settings);
				$self.html(formattedValue);
			}
		});
	};

	$.fn.countTo.defaults = {
		from: 0,               // the number the element should start at
		to: 0,                 // the number the element should end at
		speed: 1000,           // how long it should take to count between the target numbers
		refreshInterval: 100,  // how often the element should be updated
		decimals: 0,           // the number of decimal places to show
		formatter: formatter,  // handler for formatting the value before rendering
		onUpdate: null,        // callback method for every time the element is updated
		onComplete: null       // callback method for when the element finishes updating
	};

	function formatter(value, settings) {
		return value.toFixed(settings.decimals);
	}
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('#count-number').data('countToOptions', {
	formatter: function (value, options) {
	  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
	}
  });

  // start all the timers
  $('.timer').each(count);

  function count(options) {
	var $this = $(this);
	options = $.extend({}, options || {}, $this.data('countToOptions') || {});
	$this.countTo(options);
  }
});
＆＃13;
body {
  font-family: Arial;
  padding: 25px;
  background-color: #f5f5f5;
  color: #808080;
  	text-align: center;
}

/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
.team-leader-box {
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color:  #808080; padding: 10px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5; }
}

.counter.col_fourth {
  background-color: #fff ;
  border-radius: 10px;

}
＆＃13;
<section class="main-section team" id="team"><!--main-section team-start-->
	<div class="container">
        <h2>team</h2>
        <h6>Take a closer look into our amazing team. We won’t bite.</h6>
        <div class="team-leader-block clearfix">
            <div class="team-leader-box">
                <div class="team-leader wow fadeInDown delay-03s">
                    <div class="team-leader-shadow"><a href="#"></a></div>
                    <img src="img/team-leader-pic1.jpg" alt="">
                    <ul>
                        <li><a href="#" class="fa-twitter"></a></li>
                        <li><a href="#" class="fa-facebook"></a></li>
                        <li><a href="#" class="fa-pinterest"></a></li>
                        <li><a href="#" class="fa-google-plus"></a></li>
                    </ul>
                </div>



								<div class="wrapper wow fadeInDown delay-05s">
										<div class="counter col_fourth">
											<i class="fa fa-check fa-2x"></i>
											<h2 class="timer count-title" id="count-number" data-to="50" data-speed="1500"></h2>
											 <p class="count-text ">points</p>
											 <p1>click to know</p1>
										</div>
									</div>

            </div>
            <div class="team-leader-box">
                <div class="team-leader  wow fadeInDown delay-06s">
                    <div class="team-leader-shadow"><a href="#"></a></div>
                    <img src="img/team-leader-pic2.jpg" alt="">
                    <ul>
                        <li><a href="#" class="fa-twitter"></a></li>
                        <li><a href="#" class="fa-facebook"></a></li>
                        <li><a href="#" class="fa-pinterest"></a></li>
                        <li><a href="#" class="fa-google-plus"></a></li>
                    </ul>
                </div>



																<div class="wrapper wow fadeInDown delay-05s">
																		<div class="counter col_fourth">
																			<i class="fa fa-check fa-2x"></i>
																			<h2 class="timer count-title" id="count-number" data-to="30" data-speed="1500"></h2>
																			 <p class="count-text ">points</p>
																		</div>
																	</div>
						</div>
            <div class="team-leader-box">
                <div class="team-leader wow fadeInDown delay-09s">
                    <div class="team-leader-shadow"><a href="#"></a></div>
                    <img src="img/team-leader-pic3.jpg" alt="">
                    <ul>
                        <li><a href="#" class="fa-twitter"></a></li>
                        <li><a href="#" class="fa-facebook"></a></li>
                        <li><a href="#" class="fa-pinterest"></a></li>
                        <li><a href="#" class="fa-google-plus"></a></li>
                    </ul>
                </div>

																<div class="wrapper wow fadeInDown delay-05s">
																		<div class="counter col_fourth">
																			<i class="fa fa-check fa-2x"></i>
																			<h2 class="timer count-title" id="count-number" data-to="10" data-speed="1500"></h2>
																			 <p class="count-text ">points</p>
																		</div>
																	</div>



						</div>
        </div>
    </div>

		<div class="popup" id="popup">
			<div class="popup__inner">
		<header class="popup__header">
		<a onclick="$('#popup').fadeOut()" id="popup-exit">esc</a>
		</header>
		<img src="http://www.fillmurray.com/124/124" alt="Bart Veneman" width="200" height="200" class="profile__image" /><!--

		--><section class="profile__details">
		<ul class="profile__stats">
		<li>
			<h3 class="profile_stat__heading">Gold</h3>
			<div class="profile_stat__number">17</div>
		</li><!--
		--><li>
			<h3 class="profile_stat__heading">Silver</h3>
			<div class="profile_stat__number">8</div>
		</li><!--
		--><li>
			<h3 class="profile_stat__heading">Bronze</h3>
			<div class="profile_stat__number">21</div>
		</li>
		</ul>

		<h2 class="profile__name" id="popup-name"></h2>
		<h2 class="profile__name">Designation: </h2>
		<h2 class="profile__name">Reporting Manager: </h2>
		<h2 class="profile__name">Email: </h2>
		<h2 class="profile__name">Date of Join: </h2>
		<h2 class="profile__name" id="popup-score"></h2>
		<h2 class="profile__name">Latest Week Points: </h2>
		<h2 class="profile__name">Overall Points: </h2>
		<h2 class="profile__name">Medals Rewarded:</h2>




		<ul class="social">
		<li><a href="#"><i class="fa fa-github"></i></a></li><!--
		--><li><a href="#"><i class="fa fa-instagram"></i></a></li><!--
		--><li><a href="#"><i class="fa fa-twitter"></i></a></li><!--
		--><li><a href="#"><i class="fa fa-bitbucket"></i></a></li><!--
		--><li class="location"><i class="fa fa-map-marker"></i><span>Bangalore, IN</span></li>
		</ul>
		</section>

		</div>
		</div>
</section>
＆＃13;
＆＃13;
＆＃13; 问题2：

我正在尝试弹出一个弹出窗口，当用户点击数字框所在的点框时，会显示弹出窗口。现在它显示在点框的底部。

弹出窗口的javascript。这些html在上面的代码中：

＆＃13;
＆＃13;
< script type = "text/javascript" >
  $(document).ready(function() {
    $('.tab a').on('click', function(e) {
      e.preventDefault();
      var _this = $(this);
      var block = _this.attr('href');
      $(".tab").removeClass("active");
      _this.parent().addClass("active");
      $(".counter col_fourth").hide();
      $(block).fadeIn();
    });


    /**
     * Fade in the Popup
     */
    $('.counter col_fourth').on('click', function() {
      $('#popup').fadeIn();

    });

  }); < /script>
＆＃13;
＆＃13;
＆＃13;
如果有人在这里，请帮助我。