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

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 :

f0ff38f95f97e9adaf2996656fde08962cacc6d41bbb37262a98f745aa00fbf0
4a26ca5b0e654502c38f3e7ca59cf4a42cacc6d41bbb37262a98f745aa00fbf0
e388a4556c0f65e1904146cc1a846bee38de4fc0f1377dbf639abf16409266be【Exemple de code】54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
712231cdf4e4ac4bb2ff1b81fe71f40e
09c0dbc96a10fef8c9e2a5dc3783df00$("#a").scrollFix(-200);
dc6dce4a544fdca2df29d5ac0ea9906bComme à être corrigé lors du défilement jusqu'à 200 px ci-dessous, déclenché de haut en bas par défaut16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
8c63c447433cb8884011478337c0a830$("#b").scrollFix(200,"bottom");
dc6dce4a544fdca2df29d5ac0ea9906bCommencez la correction lors du défilement jusqu'à 200 px ci-dessus, spécifiez "bottom" pour déclencher de bas en haut16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
401db1ee3dbfd4818a4a5454d44296aa$("#c").scrollFix("top","top");
dc6dce4a544fdca2df29d5ac0ea9906bCommencez la correction lors du défilement jusqu'à 0 distance ci-dessus, spécifiez "top" pour déclencher de haut en bas16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
2624006370d153805b4ddcff1b5707a1$("#d").scrollFix("bottom","top");
dc6dce4a544fdca2df29d5ac0ea9906bCommencez la correction lors du défilement jusqu'à la distance 0 ci-dessous, spécifiez "bottom" pour déclencher de bas en haut16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Code d'implémentation :

Copier le code Le code est le suivant :

4ec11beb6c39d0703d1751d203c17053// cde970349f18b92397e598d3b6d1de032cacc6d41bbb37262a98f745aa00fbf0

Code de base :

;(function($) {
 jQuery.fn.scrollFix = function(height, dir) {
  height = height || 0;
  height = height == "top" ? 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);