JQuery Bleiben Sie das Element beim Scrollen in der Ansicht

Dieser JQuery -Code -Snippet hält ein Element in Ansicht, als die Seite scrolls. Eine Demo zeigt diesen Effekt auf eine rechte Seitenleiste. Der Code wird sowohl als eigenständiges Skript als auch als wiederverwendbares JQuery -Plugin dargestellt. Schließlich befasst sich ein FAQ -Abschnitt mit allgemeinen JQuery Scrolling -Fragen.

Der Code (Standalone):

<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>

Der Code (JQuery -Plugin):

<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>

häufig gestellte Fragen (FAQs):

Dieser Abschnitt enthält präzise Antworten auf gemeinsame Fragen zum Bildlauf von JQuery-Elementen, einschließlich Techniken für animierte und sofortige Scrollen, horizontales Scrollen, Ansichtsfenster und Schaltflächen-ausgelöste Scrollen. Die Code -Beispiele sind für eine verbesserte Lesbarkeit leicht neu formatiert.

Q1: SCROLL ZU ELEMENTEN?

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

q2: Instant Scroll to Element?

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

Q3: Horizontale Schriftrolle zum Element?

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

Q4: Überprüfen Sie, ob das Element im Ansichtsfenster ist?

<code class="language-javascript">function isInViewport(element) {
  let elementTop = $(element).offset().top;
  let elementBottom = elementTop + $(element).outerHeight();
  let viewportTop = $(window).scrollTop();
  let viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
}</code>

Q5: Scrollen Sie zum Element auf der Schaltfläche Klicken?

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

Das obige ist der detaillierte Inhalt vonJQuery Bleiben Sie das Element beim Scrollen in der Ansicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!