0

この質問が以前に尋ねられたことは知っていますが、それらの解決策は私にとってはうまくいきません。使用している画像に起因する場合があります。

ここに私の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
      }
 }

このプラグインも試しました

コードで：

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;
}
4

3 に答える 3

0

jQueryの:visibleチェックを使用できます。のような要素を選択するだけですif($('.first').is(':visible')){ //do something }

于 2013-08-30T17:01:56.230 に答える
0

私はあなたの問題を理解していませんが、要素がページに存在するかどうかを確認するにはlength. たとえば、存在するページがあるかどうかを確認するdivにid='tour'は:

 if($('#tour').length>=1) { 
    //some code here
  }
于 2013-08-29T23:30:40.613 に答える
0

コードを少し整理.し、変数ごとにclass=""分けて、 jsFiddleでうまくいくようです（5秒以内に下にスクロールすると、正しいアラートが表示されます）var

$('.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');
  }
});
于 2013-08-30T17:51:25.407 に答える