我知道之前已经问过这个问题,但这些解决方案对我不起作用。它可能必须使用图像。
这是我的HTML:
<div id="tour">
<section class="first js-background"> // this section is repeated 5 more times
<div class="background js-first"></div>//image located in here 300 px height
<div class="copy">
<h6>Line one</h6>
<h1 class="space large">Line two</h1>
<h6>Line three</h6>
</div>
</section>
</div>
javascript以检查是否可见:
$('.js-background').each(function(x, item) {
var $current = $(item),
$window = $(window),
elemTop = $current.offset().top,
elemBottom = elemTop + $current.height(),
docViewTop = $(window).scrollTop(),
docViewBottom = docViewTop + $(window).height(),
if ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) ) {
//do code here if true
}
}
我也试过这个plugin
代码:
if ($current.visible()) {
//if visible do something
}
对于这两种类型的代码,当我触发该功能时,只有第一部分在浏览器窗口中可见。 if语句返回true 6次。
图像是背景而非img标记
的CSS:
#tour .first .background{
background: url('/Content/images/1.jpg') center center no-repeat;
background-size: 100%;
height: 350px;
}
答案 0 :(得分:0)
我还没有理解你的问题,但要检查页面中是否存在元素,请使用length
。
例如,检查div
是否存在id='tour'
页面:
if($('#tour').length>=1) {
//some code here
}
答案 1 :(得分:0)
您可以使用jQuery的:visible
检查。只需选择if($('.first').is(':visible')){
//do something
}
答案 2 :(得分:0)
稍微整理一下你的代码,.
中没有class=""
并且每个变量分开var
,似乎对我jsFiddle有用(如果向下滚动) 5秒钟它会给你正确的警报)
$('.js-background').each(function(x, item) {
var $current = $(item);
var $window = $(window);
var elemTop = $current.offset().top;
var elemBottom = elemTop + $current.height();
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
if ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
&& (elemBottom <= docViewBottom) && (elemTop >= docViewTop) ) {
alert(x + ' is visible');
}
});