jQuery menyimpan elemen memandangkan menatal

Coretan kod jQuery ini menyimpan elemen yang dilihat sebagai skrol halaman. Demo menunjukkan kesan ini pada iklan bar sisi kanan. Kod ini dibentangkan sebagai skrip mandiri dan sebagai plugin jQuery yang boleh diguna semula. Akhirnya, bahagian Soalan Lazim menangani soalan menatal jQuery biasa.

Kod (mandiri):

<code class="language-javascript">//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);</code>

kod (plugin jQuery):

<code class="language-javascript">/**
 * 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);</code>

Soalan Lazim (Soalan Lazim):

Bahagian ini memberikan jawapan ringkas kepada soalan-soalan biasa mengenai jQuery Element View Scrolling, termasuk teknik untuk menatal animasi dan segera, menatal mendatar, pemeriksaan viewport, dan menatal yang dicetuskan butang. Contoh kod sedikit diubahsuai untuk kebolehbacaan yang lebih baik.

Q1: Tatal Animate ke Elemen? q2: tatal segera ke elemen?

<code class="language-javascript">$('html, body').animate({ scrollTop: $("#elementID").offset().top }, 2000);</code>

q3: tatal mendatar ke elemen?

<code class="language-javascript">$('html, body').scrollTop($("#elementID").offset().top);</code>

Q4: Periksa jika elemen berada di Viewport?

<code class="language-javascript">$('html, body').animate({ scrollLeft: $("#elementID").offset().left }, 2000);</code>

Q5: tatal ke elemen pada butang klik?

Atas ialah kandungan terperinci jQuery menyimpan elemen memandangkan menatal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!