Compétences du plug-in_javascript de positionnement de défilement jQuery scrollFix-js tutoriel-php.cn

Compétences du plug-in_javascript de positionnement de défilement jQuery scrollFix

WBOY

Libérer： 2016-05-16 16:06:26

original

1331 Les gens l'ont consulté

Lorsque l'utilisateur fait défiler la page vers le haut ou vers le bas jusqu'à une certaine position, l'élément cible commence à être corrigé (position : fixe). Lorsque l'utilisateur revient à la position d'origine, l'élément cible revient à son état d'origine. La position relative de l'écran et le déclenchement du défilement du déclencheur peuvent être personnalisés. La direction du défilement est compatible avec IE6

[Paramètres du plug-in]

$(".target_element").scrollFix( [ "top" | "bottom" | length (peut être négatif, indiquant un bas relatif), [ "top" | "bottom" ] ]);

Le premier paramètre : Facultatif, la valeur par défaut est "top". Lorsque l'élément cible atteint la position par rapport à l'écran, la fixation sera déclenchée. Vous pouvez renseigner une valeur, telle que 100, -200, et un. une valeur négative signifie par rapport au bas de l'écran

Le premier paramètre : Facultatif, la valeur par défaut est "top", ce qui signifie déclencher un sens de défilement fixe, "top" signifie déclencher lors d'un défilement de haut en bas, "bottom" signifie déclencher lors d'un défilement de bas en haut

【Télécharger le plug-in】scrollFix(jb51.net).rar

Copier le code Le code est le suivant :

【Exemple de code】

$("#a").scrollFix(-200);

Comme à être corrigé lors du défilement jusqu'à 200 px ci-dessous, déclenché de haut en bas par défaut

$("#b").scrollFix(200,"bottom");

Commencez la correction lors du défilement jusqu'à 200 px ci-dessus, spécifiez "bottom" pour déclencher de bas en haut

$("#c").scrollFix("top","top");

Commencez la correction lors du défilement jusqu'à 0 distance ci-dessus, spécifiez "top" pour déclencher de haut en bas

$("#d").scrollFix("bottom","top");

Commencez la correction lors du défilement jusqu'à la distance 0 ci-dessous, spécifiez "bottom" pour déclencher de bas en haut

Code d'implémentation :

Copier le code Le code est le suivant :

Code de base :

;(function($) {
 jQuery.fn.scrollFix = function(height, dir) {
  height = height || 0;
  height = height == "top" &#63; 0 : height;
  return this.each(function() {
   if (height == "bottom") {
    height = document.documentElement.clientHeight - this.scrollHeight;
   } else if (height < 0) {
    height = document.documentElement.clientHeight - this.scrollHeight + height;
   }
   var that = $(this),
    oldHeight = false,
    p, r, l = that.offset().left;
   dir = dir == "bottom" &#63; dir : "top"; //默认滚动方向向下
   if (window.XMLHttpRequest) { //非ie6用fixed


    function getHeight() { //>=0表示上面的滚动高度大于等于目标高度
     return (document.documentElement.scrollTop || document.body.scrollTop) + height - that.offset().top;
    }
    $(window).scroll(function() {
     if (oldHeight === false) {
      if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
       oldHeight = that.offset().top - height;
       that.css({
        position: "fixed",
        top: height,
        left: l
       });
      }
     } else {
      if (dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) {
       that.css({
        position: "static"
       });
       oldHeight = false;
      } else if (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight) {
       that.css({
        position: "static"
       });
       oldHeight = false;
      }
     }
    });
   } else { //for ie6
    $(window).scroll(function() {
     if (oldHeight === false) { //恢复前只执行一次，减少reflow
      if ((getHeight() >= 0 && dir == "top") || (getHeight() <= 0 && dir == "bottom")) {
       oldHeight = that.offset().top - height;
       r = document.createElement("span");
       p = that[0].parentNode;
       p.replaceChild(r, that[0]);
       document.body.appendChild(that[0]);
       that[0].style.position = "absolute";
      }
     } else if ((dir == "top" && (document.documentElement.scrollTop || document.body.scrollTop) < oldHeight) || (dir == "bottom" && (document.documentElement.scrollTop || document.body.scrollTop) > oldHeight)) { //结束
      that[0].style.position = "static";
      p.replaceChild(that[0], r);
      r = null;
      oldHeight = false;
     } else { //滚动
      that.css({
       left: l,
       top: height + document.documentElement.scrollTop
      })
     }
    });
   }
  });
 };
})(jQuery);

Copier après la connexion