[英]How to initiate Function when Anchor tag is reached
(function start (){
$('.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) +'%');
}
});
});
}, 500)
我试图找到一种在我的页面上到达锚标签时触发此方法的方法。 所有信息都被分成一页,并且该图形功能具有动画效果。 问题是它位于#skills锚点上我页面的下方,我希望在到达/看到该锚点时触发动画/功能。
有什么想法吗? Js / JQ的新手。
谢谢你的帮助。
<div class="bar cf" data-percent="100%"><span class="jacklabel"></span><span class="new_labels">SEO</span></div></div>
其余的是CSS的图形栏等。
@mixin transition($transition-property, $transition-time, $method) {
-webkit-transition: $transition-property $transition-time $method;
-moz-transition: $transition-property $transition-time $method;
-ms-transition: $transition-property $transition-time $method;
-o-transition: $transition-property $transition-time $method;
transition: $transition-property $transition-time $method;
}
.jackwrap {
width: 100%;
margin: 0 auto;
}
.bar: nth-child(3n+3) {
color: #ccc;
}
.bar {
padding-top: 5px;
border: 1px solid white;
background:#5b83d5;
width: 0px;
height: 35px;
margin: .25em 0;
color: #FFF;
transition:width 2s, background .2s;
-webkit-transform: translate3d(0,0,0);
&:nth-of-type(2n) {
background:lighten(#dadada , 10% );
}
.label {
font-size: 0.75em;
width: 8em;
display: inline-block;
z-index: 1;
font-weight: bold;
&.light {
background:lighten(#3d3d3d , 10% );
}
}
}
.count {
position: absolute;
right: 0.25em;
top: 0.75em;
padding: 0.15em;
font-size: 0.75em;
font-weight: bold;
font-family: $fontSans;
padding-top: 0px;
}
.new_labels {
padding-left: 5px;
padding-top: 5px;
margin-top: 5px;
}
#keep-it-left {
text-align: left;
}
这样的东西? http://jsfiddle.net/swm53ran/127/
它只是您可以应用于代码的一般示例(因为我无权访问完整的代码)
$(document).ready(function() {
var scollH = 0;
var aH = $('.special').position().top;
console.log(aH);
$(document).on('scroll', function() {
scrollH = $(document).scrollTop();
console.log(scrollH);
if (scrollH > aH) {
alert('i hit/am past the special anchor tag');
}
});
});
<div class="content">Other content above special anchor</div>
<a href="#" class="special">This is my Special Anchor Tag</a>
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.