jQuery scrollFix Scroll-Positionierungs-Plug-in_Javascript-Fähigkeiten-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:06:26

Original

1331 Leute haben es durchsucht

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:

【Codebeispiel】

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

Beginnt mit der Korrektur, wenn auf 200 Pixel unten gescrollt wird, standardmäßig von oben nach unten ausgelöst

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

Beginnen Sie mit der Korrektur, wenn Sie auf 200 Pixel oben scrollen. Geben Sie „unten“ an, um von unten nach oben auszulösen.

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

Fixierung beginnen, wenn auf den Abstand 0 oben gescrollt wird, geben Sie „top“ an, um von oben nach unten auszulösen

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

Beginnen Sie mit der Korrektur, wenn Sie unten auf den Abstand 0 scrollen. Geben Sie „unten“ an, um von unten nach oben auszulösen

Implementierungscode:

Code kopieren Der Code lautet wie folgt:

Kerncode:

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

Nach dem Login kopieren