javascript - 仅当该部分出现在浏览器 View 中时，jQuery 才计算目标数

Question

在this website ，如果你向下滚动到“勋章部分”

然后刷新页面，你会看到数字滚动并停在一个目标上。

现在的问题是，我们能否仅在奖牌部分出现在浏览器 View 中时才滚动数字。

发生的事情是，当用户加载网站时，数字会完美滚动，但它们是在后台发生的。用户当他/她向下滚动到勋章部分时，该效果是不可见的，因为它已经过去了，他需要刷新页面才能看到效果。

社区中的一个人建议这个 jQuery Plugin .我尝试在我的 JavaScript 中使用该插件(请按照 fiddle 或代码的 JavaScript 部分中的注释进行操作)

涉及的代码:

(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);
  }
});



// plugin for appear/disappear events which are fired when an element became visible/invisible in the browser viewport.

// singleRun : boolean to ensure we only animate once
var singleRun = true;
// executes when .counter container becomes visible
$(".counter").on("appear", function(data) {
  // initialise the counters
  var counters = {};
  var i = 0;
  if (singleRun) {
    // track each of the counters
    $(".timer").each(function() {
      counters[this.id] = $(this).data("to");
      i++;
    });
    // animate the counters
    $.each(counters, function(key, val) {
      $({
        countVal: 0
      }).animate({
        countVal: val
      }, {
        duration: 1500,
        easing: "linear",
        step: function() {
          // update the display
          $("#" + key).text(Math.floor(this.countVal));
        }
      });
    });
    singleRun = false;
  }
});

/* CSS Document */

/* Float Elements
---------------------------------*/

.fl-lt {
  float: left;
}
.fl-rt {
  float: right;
}
/* Clear Floated Elements
---------------------------------*/

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.clearfix:after {
  clear: both;
}
.figure {
  margin: 0px;
}
img {
  max-width: 100%;
}
a,
a:hover,
a:active {
  outline: 0px !important
}
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.1.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Primary Styles
---------------------------------*/

body {
  background: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: normal;
  color: #888888;
  margin: 0;
}
h2 {
  font-size: 34px;
  color: #222222;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: -1px;
  margin: 0 0 15px 0;
  text-align: center;
  text-transform: uppercase;
}
h3 {
  font-family: 'Montserrat', sans-serif;
  color: #222222;
  font-size: 16px;
  margin: 0 0 5px 0;
  text-transform: uppercase;
  font-weight: 400;
}
h6 {
  font-size: 16px;
  color: #888888;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  margin: 0 0 60px 0;
}
p {
  line-height: 24px;
  margin: 0;
}
/* Header Styles
---------------------------------*/

.header {
  text-align: center;
  background: url(../img/pw_maze_black_2X.png) left top repeat;
  padding: 280px 0;
}
.logo {
  width: 130px;
  margin: 0 auto 35px;
}
.header h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 50px;
  font-weight: 400;
  letter-spacing: -1px;
  margin: 0 0 22px 0;
  color: #fff;
}
.we-create {
  padding: 0;
  margin: 35px 0 55px;
}
.wp-pic {
  margin-bottom: 20px;
}
.we-create li {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: #bcbcbc;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 5px 0 0;
  padding: 0 0 0 15px;
}
.we-create li:first-child {
  background: none;
}
.start-button {
  padding-left: 0px;
}
.start-button li a {
  color: #fff;
}
.link {
  padding: 15px 35px;
  background: #7cc576;
  color: #fff !important;
  font-size: 16px;
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  border-radius: 3px;
  text-transform: uppercase;
  line-height: 25px;
  margin-bottom: 20px;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
.link:hover {
  text-decoration: none;
  color: #7cc576 !important;
  background: #fff;
}
.link:active,
.link:focus {
  background: #7cc576;
  text-decoration: none;
  color: #fff !important;
}
/* Team
---------------------------------*/

.team-leader-block {
  max-width: 993px;
  margin: 0 auto;
}
.team-leader-box {
  width: 30.66%;
  margin-right: 3.82979%;
  height: 490px;
  overflow: hidden;
  text-align: center;
  float: left;
}
.team-leader-box span {
  margin-bottom: 24px;
  display: block;
}
.team-leader-box:nth-of-type(3n+0) {
  margin: 0;
}
.team-leader {
  width: auto;
  height: auto;
  position: relative;
  border-radius: 50%;
  box-shadow: 0px 0px 0px 7px rgba(241, 241, 241, 0.80);
  margin: 7px 7px 25px 7px;
}
.team-leader-shadow {
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  border-radius: 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
  border-radius: 50%;
}
.team-leader-shadow a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  transition: all 0.6s ease-in-out;
  font-size: 20px;
  opacity: 0;
  color: #fff;
  text-decoration: none;
}
.team-leader:hover .team-leader-shadow {
  box-shadow: inset 0px 0px 0px 148px rgba(17, 17, 17, 0.80);
}
.team-leader:hover .team-leader-shadow a {
  opacity: 1;
}
/*.team-leader:hover ul {
  display: block;
  opacity: 7
}*/

.team-leader img {
  display: block;
  border-radius: 50%;
}
.team-leader ul {
  display: block;
  opacity: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: -14px;
  z-index: 15;
  transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
}
/*change hover text*/

.team-leader ul p2 {
  display: inline;
  font-size: 25px;
  color: blue;
  text-align: center;
  cursor: pointer;
  cursor: hand;
}
.
/* Footer
---------------------------------*/

.footer {
  background: url(../img/pw_maze_black_2X.png) left top repeat;
  padding: 35px 0 35px;
}
.footer-logo {
  margin: 15px auto 35px;
  width: 76px;
}
.copyright,
.credits {
  color: #cccccc;
  font-size: 14px;
  display: block;
  text-align: center;
}
.copyright a,
.credits a {
  color: #7cc576;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}
/* Animation Timers
---------------------------------*/

.delay-02s {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}
.delay-03s {
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
}
.delay-04s {
  animation-delay: 0.4s;
  -webkit-animation-delay: 0.4s;
}
.delay-05s {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}
.delay-06s {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
}
.delay-07s {
  animation-delay: 0.7s;
  -webkit-animation-delay: 0.7s;
}
.delay-08s {
  animation-delay: 0.8s;
  -webkit-animation-delay: 0.8s;
}
.delay-09s {
  animation-delay: 0.9s;
  -webkit-animation-delay: 0.9s;
}
.delay-1s {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}
.delay-12s {
  animation-delay: 1.2s;
  -webkit-animation-delay: 1.2s;
}
#team.main-section.team {
  background-color: #e6e6e6;
}
/*css related to the points box*/

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;
}
.counter.col_fourth :hover {
  cursor: pointer;
  cursor: hand;
  color: blue;
}
.counter.col_fourth :hover {
  display: block;
  opacity: 1
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, maximum-scale=1">

  <title>Homepage</title>
  <link rel="icon" href="favicon.png" type="image/png">
  <link rel="shortcut icon" href="favicon.ico" type="img/x-icon">
  <!-- related to number count -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css'>

  <link rel="stylesheet" href="css/style1.css">

  <!-- number count ends -->

  <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,800italic,700italic,600italic,400italic,300italic,800,700,600' rel='stylesheet' type='text/css'>

  <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="css/font-awesome.css" rel="stylesheet" type="text/css">
  <link href="css/responsive.css" rel="stylesheet" type="text/css">
  <link href="css/animate.css" rel="stylesheet" type="text/css">

  <!--[if IE]><style type="text/css">.pie {behavior:url(PIE.htc);}</style><![endif]-->

  <!-- <script type="text/javascript" src="js/jquery.1.8.3.min.js"></script> -->
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script type="text/javascript" src="js/bootstrap.js"></script>
  <script type="text/javascript" src="js/jquery-scrolltofixed.js"></script>
  <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
  <script type="text/javascript" src="js/jquery.isotope.js"></script>
  <script type="text/javascript" src="js/wow.js"></script>
  <script type="text/javascript" src="js/classie.js"></script>
  <script src="contactform/contactform.js"></script>


</head>

<body>
  <header class="header" id="header">
    <!--header-start-->

  </header>
  <!--header-end-->

  <section class="main-section paddind" id="Portfolio">
    <!--main-section-start-->
    <div class="container">
      <h2>Portfolio</h2>
      <h6>Fresh portfolio of designs that will keep you wanting more.</h6>
      <div class="portfolioFilter">
        <ul class="Portfolio-nav wow fadeIn delay-02s">
          <li><a href="#" data-filter="*" class="current">All</a>
          </li>
          <li><a href="#" data-filter=".branding">Branding</a>
          </li>
          <li><a href="#" data-filter=".webdesign">Web design</a>
          </li>
          <li><a href="#" data-filter=".printdesign">Print design</a>
          </li>
          <li><a href="#" data-filter=".photography">Photography</a>
          </li>
        </ul>
      </div>

    </div>
    <div class="portfolioContainer wow fadeInUp delay-04s">
      <div class=" Portfolio-box printdesign">
        <a href="#">
          <img src="img/Portfolio-pic1.jpg" alt="">
        </a>
        <h3>Foto Album</h3>
        <p>Print Design</p>
      </div>
      <div class="Portfolio-box webdesign">
        <a href="#">
          <img src="img/Portfolio-pic2.jpg" alt="">
        </a>
        <h3>Luca Theme</h3>
        <p>Web Design</p>
      </div>
      <div class=" Portfolio-box branding">
        <a href="#">
          <img src="img/Portfolio-pic3.jpg" alt="">
        </a>
        <h3>Uni Sans</h3>
        <p>Branding</p>
      </div>
      <div class=" Portfolio-box photography">
        <a href="#">
          <img src="img/Portfolio-pic4.jpg" alt="">
        </a>
        <h3>Vinyl Record</h3>
        <p>Photography</p>
      </div>
      <div class=" Portfolio-box branding">
        <a href="#">
          <img src="img/Portfolio-pic5.jpg" alt="">
        </a>
        <h3>Hipster</h3>
        <p>Branding</p>
      </div>
      <div class=" Portfolio-box photography">
        <a href="#">
          <img src="img/Portfolio-pic6.jpg" alt="">
        </a>
        <h3>Windmills</h3>
        <p>Photography</p>
      </div>
    </div>
  </section>
  <!--main-section-end-->



  <section class="main-section team" id="team">
    <!--main-section team-start-->
    <div class="container">
      <h2>Medals</h2>
      <h6></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="#" data-toggle="modal" data-target="#myModal1"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">

          </div>


          <!-- Modal -->
          <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Gold Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </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-number1" data-to="50" data-speed="1500"></h2>
              <p class="count-text ">points</p>

            </div>
          </div>

        </div>
        <!-- update this code -->
        <div class="team-leader-box">
          <div class="team-leader  wow fadeInDown delay-06s">
            <div class="team-leader-shadow">
              <a href="#" data-toggle="modal" data-target="#myModal2"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
            <!-- <ul> Remove this
              <p2>Click For Details</p2>
            </ul> -->
          </div>

          <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Silver Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </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-number2" 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-06s">
            <div class="team-leader-shadow">
              <a href="#" data-toggle="modal" data-target="#myModal3"> Click For Details</a>
            </div>
            <img src="http://www.owltemplates.com/demo/wordpress/success/wp-content/uploads/2013/01/man4.png" alt="">
            <!-- <ul> Remove this
							<p2>Click For Details</p2>
						</ul> -->
          </div>

          <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                  </button>
                  <h4 class="modal-title" id="myModalLabel">Bronze Medal Summary</h4>
                </div>
                <div class="modal-body">
                  ...

                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                </div>
              </div>
            </div>
          </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-number3" data-to="10" data-speed="1500"></h2>
              <p class="count-text ">points</p>
            </div>
          </div>



        </div>
        <!-- team-leader-box div ends -->
      </div>
      <!-- team-leader-block clearfix div ends -->



      <!-- popup div ends -->
    </div>
    <!-- container div ends -->
  </section>
  <!--main-section team-end-->

  <footer class="footer">
    <div class="container">
      <div class="footer-logo">
        <a href="#">
          <img src="img/footer-logo.png" alt="">
        </a>
      </div>
      <span class="copyright">&copy; Knight Theme. All Rights Reserved</span>
      <div class="credits">

        <a href="https://bootstrapmade.com/free-business-bootstrap-themes-website-templates/">Business Bootstrap Themes</a> by <a href="https://bootstrapmade.com/">BootstrapMade</a>
      </div>
    </div>
  </footer>

  <script src="js1/index1.js">
  </script>
</body>

</html>

上面的 fiddle 链接:https://jsfiddle.net/L3tntu6a/

来自社区的帮助:Stack Overflow similar links

Answer 1

您需要检查用户何时滚动或即将滚动 div。例如:

$(document).scroll(function() {
  //Basically your position in the page
  var x = $(this).scrollTop();
  //How far down (in pixels) you want the user to be when the effect to starts, eg. 500
  var y = 500;
  if (x > y) {
     //Put your effect functions in here.
  }
});

您还可以在用户向上滚动时添加效果或使用更多 if/else block 添加更多效果。