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

//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);

Der Code (JQuery -Plugin):

/**
 * 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);

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?

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

q2: Instant Scroll to Element?

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

Q3: Horizontale Schriftrolle zum Element?

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

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

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

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

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

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!