要素がスクロール・ポイントで表示される

Question

スクロールが890pxより大きい場合に表示される要素があります。 しかし、私は890pxと920pxの間で要素が見えるようにしなければならないという問題があります。ユーザーがスクロール920または890px以上をスクロールすると、その要素を非表示にする必要があります。

私はアニメーションCSSを使用して、表示されたときに要素にアニメーションを追加しています。

890px以上のユーザースクロールより多くの場合、このiはJS

に今の持っているもの

var $document = $(document), 
    $elementField = $('.center-field'); 

$document.scroll(function() { 
    if ($document.scrollTop() >= 890) { 
     $elementField.stop().addClass("show animated bounceInDown"); 
    } 
}); 

ある今、それが表示されますが、ユーザが戻ったときに、それは再び滞在する、時計のユーザスクロールのsomekindはありますか？

Answer 1

あなたはelseでhideを実行しますか？

$document.scroll(function() { 
if ($document.scrollTop() >= 890) { 
    $elementField.stop().addClass("show animated bounceInDown"); 
}else{ 
    $elementField.hide(); //or something like that 
} 

Answer 2

あなたが行われたコードは、そのように働いている：

• あなたがスクロールするたびに：
スクロールがある場合
• チェック以上890px
• ので、クラスを追加する場合

ご覧のとおり、要素を非表示にするロジックは含まれていません。 スクロールが890px未満であるかどうかを確認し、クラスを削除する必要があります。 あなたはそのような何か（あなたのノードがクラスのショーを持っていないとき、それが隠されていると仮定して）を試すことができます。

var $document = $(document), 
    $elementField = $('.center-field'); 

    $document.scroll(function() { 
     var scroll = $document.scrollTop(); 

     if (scroll >= 890 && scroll <= 920) { 
      $elementField.addClass("show animated bounceInDown").removeClass("fadeOut"); 
     } else { 
      $elementField.removeClass("show bounceInDown").addClass("fadeOut"); 
     } 
    }); 

Answer 3

があるかの条件をもう少し具体的に。

var $document = $(document), 
 
    $elementField = $('.center-field'); 
 

 
$document.scroll(function() { 
 
    if ($document.scrollTop() >= 890 && $document.scrollTop() <= 920) { 
 
    $elementField.css('color', 'tomato'); 
 
    } else { 
 
    $elementField.css('color', 'blue'); 
 
    } 
 
});

body { 
 
    position: relative; 
 
    height:1800px; 
 
} 
 

 
.center-field { 
 
    position: absolute; 
 
    top: 900px; 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<p>scroll down please</p> 
 
<h1 class="center-field">Hello</h1>