web-dev-qa-db-ja.com

要素が表示されていて、過去にスクロールされていないときに、jQueryウェイポイントプラグインを起動する方法は？

これを見てください：

http://jsfiddle.net/5Zs6F/2/

最初の赤い長方形を超えてスクロールしたときにしか見えないので、それが青色に変わるので、見え始めたらすぐに青色に変えたいと思います。そのため、下にスクロールするのに十分なコンテンツがないため、2番目が青く表示されることはありません。

HTML：

Scoll this window pane
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="box"></div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

CSS：

.box { width: 250px; height: 100px; border: 2px solid red;  }

jQuery：

$.getScript('http://imakewebthings.com/jquery-waypoints/waypoints.min.js', function() {


    $('.box').waypoint(function() {

        $(this).css({
            borderColor: 'blue'
        });

    });


});

問題の要素が表示され、スクロールされなくなったらすぐに起動するにはどうすればよいですか？

javascriptjqueryjquery-waypoints
18
TK123

offsetオプションは、ビューポートの上部に関連して、ウェイポイントが発生する場所を決定します。デフォルトでは0なので、要素が上にぶつかると発射します。必要なものが一般的であるため、ウェイポイントには、要素全体が表示されるときに起動するオフセットを設定するための単純なエイリアスが含まれています。

$('.box').waypoint(function() {
  $(this).css({
    borderColor: 'blue'
  });
}, { offset: 'bottom-in-view' });

要素のany partが下から覗き込んだときに発動する場合は、「100％」に設定する必要があります。

40
imakewebthings

この問題をCSSで解決したい場合は、以下のCSSを使用してそれを行うこともできます。

img[data-src]::before {
    content: "";
    display: block;
    padding-top: 70%;
  }

疑似要素（例::: beforeおよび:: after）を使用してimg要素に装飾を追加しようとしています。

Imgは置換された要素であるため、ブラウザーは画像の疑似要素をレンダリングしません。つまり、レイアウトは外部リソースによって制御されます。

ただし、そのルールには例外があります。画像のsrc属性が無効な場合、ブラウザはその疑似要素をレンダリングします。したがって、画像のsrcをdata-srcに格納し、srcが空の場合、疑似要素を使用してアスペクト比を設定できます。

Data-srcがsrcになるとすぐに、ブラウザーは:: beforeのレンダリングを停止し、画像の自然なアスペクト比が引き継がれます。

0
chiku

OK。正常に機能するソリューションを見つけました。

    jQuery('.zoomInDownInaktiv').waypoint(function(direction) {
    if (direction === "down") {
        jQuery(this.element).removeClass('zoomInDownInaktiv');
        jQuery(this.element).addClass('zoomInDown');
    }
}, { offset: '80%' });
0
Paul

私のために働きません。同じ名前のクラスがいくつかあり、ページが読み込まれると、最初の要素が画面上にある場合、それらはすべて変更されます。

jQuery(document).ready(function(){

jQuery('.zoomInDownInaktiv').waypoint(function() {
    //jQuery(this).removeClass('zoomInDownInaktiv');
    jQuery(this).addClass('zoomInDown');
}, { offset: 'bottom-in-view' });

}）;

0
Paul