gpt4 book ai didi

javascript - 在视口(viewport)中运行 JS 函数。

转载 作者:行者123 更新时间:2023-12-01 04:08:29 27 4
gpt4 key购买 nike

我在这里找到了如何制作计数器,我将在滚动网站上使用它。

我使用以下代码:

$(function() {
function count($this){
var current = parseInt($this.html(), 10);
$this.html(++current);
if(current !== $this.data('count')){
setTimeout(function(){count($this)}, 10);
}
}
$("span").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
});

我尝试添加以下代码,但不确定是否正确添加:

      if ($('element').visible(true)) {

}

这是当前在没有 if 语句的情况下运行的 Jfiddle 的链接。任何帮助将不胜感激。

http://jsfiddle.net/WpJxn/257/

最佳答案

这是您应该查看的内容:Check if element is visible after scrolling

这里有一个演示此技术的示例:http://jsfiddle.net/XYS2G/ - 只需尝试滚动结果窗口。

HTML:

<div class="indicators">
<span class="indicator" data-id="section1">section1</span>
<span class="indicator" data-id="section2">section2</span>
<span class="indicator" data-id="section3">section3</span>
<span class="indicator" data-id="section4">section4</span>
<span class="indicator" data-id="section5">section5</span>
<span class="indicator" data-id="section6">section6</span>
</div>
<div class="sections">
<div class="section" id="section1">section1</div>
<div class="section" id="section2">section2</div>
<div class="section" id="section3">section3</div>
<div class="section" id="section4">section4</div>
<div class="section" id="section5">section5</div>
<div class="section" id="section6">section6</div>
</div>

CSS:

.indicators { position: fixed; }
.section { height: 150px; }

JavaScript:

function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();

var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

function refreshIndicators() {
$('.indicator').each(function () {
if (isScrolledIntoView($('#' + $(this).attr('data-id')))) {
$(this).css('color', 'red');
} else {
$(this).css('color', 'black');
}
});
}

refreshIndicators();

$(window).bind('scroll', refreshIndicators);

关于javascript - 在视口(viewport)中运行 JS 函数。,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24223755/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com