9

内部に多くのliがあるdivがあります。

<div>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
...
</div>

通常、ユーザーがウィンドウ内をスクロールしているとき、一部<li>の がオーバーフローに入り、非表示になります。このjQueryプラグインを使用して、要素が画面のビューポートにあるかどうかを確認できることを知っています: http://www.appelsiini.net/projects/viewport この機能が必要なだけですが、画面全体ではなく、単一の div のみ。したがって、要素が表示されていないときにテキストを更新できます。

助けが必要です、よろしくお願いします！

4

1 に答える 1

6

これは非常に良い答えですが、これはあなたが言及した Viewport プラグインの修正版です。

(function($) {

$.belowthefold = function(lookIn, elements, settings) {
    var fold = $(lookIn).height() + $(lookIn).scrollTop();
    return $(elements).filter(function(){
        return fold <= $(this).offset().top - settings.threshold;
    });
};

$.abovethetop = function(lookIn, elements, settings) {
    var top = $(lookIn).scrollTop();
    return $(elements).filter(function(){
        return top >= $(this).offset().top + $(this).height() - settings.threshold;
    });
};

$.rightofscreen = function(lookIn, elements, settings) {
    var fold = $(lookIn).width() + $(lookIn).scrollLeft();
    return $(elements).filter(function(){
        return fold <= $(this).offset().left - settings.threshold;
    });
};

$.leftofscreen = function(lookIn, elements, settings) {
    var left = $(lookIn).scrollLeft();
    return $(elements).filter(function(){
        return left >= $(this).offset().left + $(this).width() - settings.threshold;
    });
};

})(jQuery);

次のような HTML を使用します。

<div id="lookInMe">
    <div class="peek"></div>
    <div class="peek"></div>
    [ ... ]
</div>

次のように呼び出します。

$.belowthefold("#lookInMe", ".peek", {threshold : 0}).text("Below");
$.abovethetop("#lookInMe", ".peek", {threshold : 0}).text("Above");
$.leftofscreen("#lookInMe", ".peek", {threshold : 0}).text("Left");
$.rightofscreen("#lookInMe", ".peek", {threshold : 0}).text("Right");

http://jsfiddle.net/daCrosby/vhF7x/1/

于 2013-06-21T03:38:07.617 に答える