18

これを見てください：

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'
        });

    });


});

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

4

4 に答える 4

41

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

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

要素のいずれかの部分が下から覗いたときに起動する場合は、「100％」に設定する必要があります。

于 2012-09-20T16:39:26.697 に答える
0

私のために働くことはありません。同じ名前のサーバークラスがあり、ページが読み込まれるか、最初の要素が画面に表示されると、すべて変更されます。

jQuery(document).ready(function(){

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

}）;

于 2017-11-30T09:22:24.607 に答える
0

わかった。うまく機能する解決策を見つけました。

    jQuery('.zoomInDownInaktiv').waypoint(function(direction) {
    if (direction === "down") {
        jQuery(this.element).removeClass('zoomInDownInaktiv');
        jQuery(this.element).addClass('zoomInDown');
    }
}, { offset: '80%' });
于 2017-11-30T09:31:25.420 に答える
0

この問題を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のレンダリングを停止し、画像の自然なアスペクト比が引き継ぎます。

于 2020-02-12T06:28:06.017 に答える