javascript - 如何在滚动到该部分时启动技能栏效果？

Question

我制作了一个漂亮的技能栏并且它工作正常。但是，我只想在滚动到该部分时启动技能栏效果。例如:我在介绍部分，当我向下滚动到技能部分时，就会触发效果。

这是代码:

;( function( $ ) {
    "use strict";

    $( ".bar" ).each( function() {

        var $bar = $( this ),
             $pct = $bar.find( ".pct" ),
             data = $bar.data( "bar" );

        setTimeout( function() {

            $bar
                .css( "background-color", data.color )
                .animate({
                    "width": $pct.html()
                }, data.speed || 1000, function() {

                    $pct.css({
                        "color": data.color,
                        "opacity": 1
                    });

                });

        }, data.delay || 0 );           

    });

})( jQuery );

<ul id="skills">    
    <li>
        HTML5
        <div class="bar_container">
            <span class="bar" data-bar='{ "color": "#19f" }'>
                <span class="pct">82%</span>
            </span>
        </div>
    </li>
    <li>
        CSS3
        <div class="bar_container">
            <span class="bar" data-bar='{ "color": "#27ae60", "delay": 600 }'>
                <span class="pct">100%</span>
            </span>
        </div>
    </li>
    <li>
        PHP
        <div class="bar_container">
            <span class="bar" data-bar='{ "color": "#9b59b6", "delay": 1200 }'>
                <span class="pct">60%</span>
            </span>
        </div>
    </li>
    <li>
        SQL
        <div class="bar_container">
            <span class="bar" data-bar='{ "color": "#ae8a33", "delay": 1800 }'>
                <span class="pct">30%</span>
            </span>
        </div>
    </li>
</ul>

演示:JsFiddle

Answer 1

您可以检查用户是否将窗口滚动到页面底部，然后才调用启动动画的代码部分:

function animateSkillBars() {
  $( ".bar" ).each( function() {

          var $bar = $( this ),
               $pct = $bar.find( ".pct" ),
               data = $bar.data( "bar" );

          setTimeout( function() {

              $bar
                  .css( "background-color", data.color )
                  .animate({
                      "width": $pct.html()
                  }, data.speed || 1000, function() {

                      $pct.css({
                          "color": data.color,
                          "opacity": 1
                      });

                  });

          }, data.delay || 0 );           

      });
}

;( function( $ ) {
    "use strict";
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
            animateSkillBars();
        }
    });
    
})( jQuery );

* { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; }
body { padding: 50px; background-color: #222; font-family: Arial; font-size: 14px; color: #ccc; }
ul { list-style-type: none; }

#skills {
	margin: 0 auto;
	width: 40%;
}

	#skills li {
		position: relative;
		margin-bottom: 32px;
		padding-left: 6px;
	}

		.bar_container,
		.bar {	
			position: absolute;
			left: 0;
			height: 5px;	
			border-radius: 5px;
			content: "";
		}

		.bar_container {
			bottom: -8px;
			width: 100%;
			background-color: #333;
			text-align: right;
		}			

			.bar {
				top: 0;
			}

				.pct {
					position: absolute;
					top: -19px;
					right: 0;
					opacity: 0;
					transition: opacity 0.3s linear;
				}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!
    <br><br><br><br><br><br><br><br>

<ul id="skills">	
	<li>
		HTML5
		<div class="bar_container">
			<span class="bar" data-bar='{ "color": "#19f" }'>
				<span class="pct">82%</span>
			</span>
		</div>
	</li>
	<li>
		CSS3
		<div class="bar_container">
			<span class="bar" data-bar='{ "color": "#27ae60", "delay": 600 }'>
				<span class="pct">100%</span>
			</span>
		</div>
	</li>
	<li>
		PHP
		<div class="bar_container">
			<span class="bar" data-bar='{ "color": "#9b59b6", "delay": 1200 }'>
				<span class="pct">60%</span>
			</span>
		</div>
	</li>
	<li>
		SQL
		<div class="bar_container">
			<span class="bar" data-bar='{ "color": "#ae8a33", "delay": 1800 }'>
				<span class="pct">30%</span>
			</span>
		</div>
	</li>
</ul>