jQuery scrollFix Scroll-Positionierungs-Plug-in_Javascript-Fähigkeiten

Wenn der Benutzer auf der Seite nach oben oder unten scrollt, wird das Zielelement fixiert (Position: fixiert). Wenn der Benutzer zur ursprünglichen Position zurückscrollt, kehrt das Zielelement in seinen ursprünglichen Zustand zurück relative Bildschirmposition und Auslöser des Trigger-Scrolls können angepasst werden, kompatibel mit IE6

[Plug-in-Parameter]

$(".target_element").scrollFix( [ "top" | "bottom" | length (kann negativ sein, was den relativen unteren Teil angibt), [ "top" | "bottom" ] ]);

Der erste Parameter: Optional, der Standardwert ist „oben“. Wenn das Zielelement die Position relativ zum Bildschirm erreicht, wird die Fixierung ausgelöst. Sie können einen Wert eingeben, z. B. 100, -200 und a Ein negativer Wert bedeutet relativ zum unteren Bildschirmrand

Der erste Parameter: Optional, der Standardwert ist „oben“, was bedeutet, dass eine feste Bildlaufrichtung ausgelöst wird, „oben“ bedeutet, dass beim Scrollen von oben nach unten ausgelöst wird, „unten“ bedeutet, dass beim Scrollen von unten nach oben ausgelöst wird

【Plug-in herunterladen】scrollFix(jb51.net).rar

Code kopieren Der Code lautet wie folgt:

f0ff38f95f97e9adaf2996656fde08962cacc6d41bbb37262a98f745aa00fbf0
4a26ca5b0e654502c38f3e7ca59cf4a42cacc6d41bbb37262a98f745aa00fbf0
e388a4556c0f65e1904146cc1a846bee38de4fc0f1377dbf639abf16409266be【Codebeispiel】54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
712231cdf4e4ac4bb2ff1b81fe71f40e
09c0dbc96a10fef8c9e2a5dc3783df00$("#a").scrollFix(-200);
dc6dce4a544fdca2df29d5ac0ea9906bBeginnt mit der Korrektur, wenn auf 200 Pixel unten gescrollt wird, standardmäßig von oben nach unten ausgelöst16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
8c63c447433cb8884011478337c0a830$("#b").scrollFix(200,"bottom");
dc6dce4a544fdca2df29d5ac0ea9906bBeginnen Sie mit der Korrektur, wenn Sie auf 200 Pixel oben scrollen. Geben Sie „unten“ an, um von unten nach oben auszulösen.16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
401db1ee3dbfd4818a4a5454d44296aa$("#c").scrollFix("top","top");
dc6dce4a544fdca2df29d5ac0ea9906bFixierung beginnen, wenn auf den Abstand 0 oben gescrollt wird, geben Sie „top“ an, um von oben nach unten auszulösen16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
2624006370d153805b4ddcff1b5707a1$("#d").scrollFix("bottom","top");
dc6dce4a544fdca2df29d5ac0ea9906bBeginnen Sie mit der Korrektur, wenn Sie unten auf den Abstand 0 scrollen. Geben Sie „unten“ an, um von unten nach oben auszulösen16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Implementierungscode:

Code kopieren Der Code lautet wie folgt:

4ec11beb6c39d0703d1751d203c17053// d41da8a09ceffa334c575ce4205f56332cacc6d41bbb37262a98f745aa00fbf0

Kerncode:

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