jQueryは、スクロールするときに要素を視界に保ちます

このjQueryコードスニペットは、ページがスクロールするときに要素を視界に保ちます。 デモは、右側のサイドバー広告にこの効果を示しています。 このコードは、スタンドアロンスクリプトと再利用可能なjQueryプラグインの両方として表示されます。 最後に、FAQセクションは、一般的なjQueryスクロールの質問に対処します

コード（スタンドアロン）：

//keep element in view
(function($) {
    $(document).ready(function() {
        var elementPosTop = $('#jq4u-sidebar-ads').position().top;
        $(window).scroll(function() {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            if (wintop > elementPosTop) {
                $('#jq4u-sidebar-ads').css({ "position": "fixed", "top": "10px" });
            } else {
                $('#jq4u-sidebar-ads').css({ "position": "inherit" });
            }
        });
    });
})(jQuery);

コード（jqueryプラグイン）：

/**
 * jQuery keep element in view plugin.
 *
 * @author      Sam Deering
 * @copyright   Copyright (c) 2012 jQuery4u
 * @license     http://jquery4u.com/license/
 * @link        http://jquery4u.com
 * @since       Version 1.0
 * @notes       Plugin only works on scroll down elements.
 */

(function($) {
    $.fn.keepElementInView = function() {
        var elemPosTop = this.position().top;
        $(window).scroll(function() {
            var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
            if (wintop > elemPosTop) {
                this.css({ "position": "fixed", "top": "10px" });
            } else {
                this.css({ "position": "inherit" });
            }
        });
        return this;
    };

    $(document).ready(function() {
        $('#jq4u-sidebar-ads').keepElementInView();
    });
})(jQuery);

よくある質問（FAQ）： このセクションでは、アニメーションおよびインスタントスクロールの手法、水平スクロール、ビューポートチェック、ボタントリガースクロールなど、jQuery要素ビュースクロールに関する一般的な質問に対する簡潔な回答を提供します。 コードの例は、読みやすさを改善するためにわずかに再フォーマットされています。

q1：elementにスクロールするのをアニメーションしますか？

q2：要素にインスタントスクロールしますか？

$('html, body').animate({ scrollTop: $("#elementID").offset().top }, 2000);

Q3：要素への水平スクロール？

​​

$('html, body').scrollTop($("#elementID").offset().top);

Q4：要素が表示されているかどうかを確認しますか？

$('html, body').animate({ scrollLeft: $("#elementID").offset().left }, 2000);

Q5：[ボタン]クリックの[要素]をスクロールしますか？

以上がjQueryは、スクロールするときに要素を視界に保ちますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。