jQuery Keep Element en vue lors du défilement

Cet extrait de code jQuery garde un élément en vue de défiler la page. Une démo montre cet effet sur une annonce latérale droite. Le code est présenté à la fois comme un script autonome et comme un plugin jQuery réutilisable. Enfin, une section FAQ aborde les questions de défilement jQuery communes.

Le code (autonome):

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

Le code (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>

Questions fréquemment posées (FAQ):

Cette section fournit des réponses concises aux questions courantes sur le défilement de l'élément jQuery, y compris les techniques de défilement animé et instantané, de défilement horizontal, de vérifications de la fenêtre et de défilement déclenché par les bouton. Les exemples de code sont légèrement reformatés pour une meilleure lisibilité.

Q1: Animer le défilement vers l'élément?

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

Q2: Scroll instantané vers l'élément?

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

Q3: défilement horizontal vers l'élément?

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

Q4: Vérifiez si l'élément est dans la fenêtre?

<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: Faites défiler l'élément sur le bouton cliquer?

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!