jQuery scrollFix kemahiran plug-in_javascript kedudukan skrol

Apabila pengguna menatal ke atas atau ke bawah halaman ke kedudukan tertentu, elemen sasaran mula dibetulkan (kedudukan: tetap Apabila pengguna menatal kembali ke kedudukan asal, elemen sasaran kembali ke keadaan asalnya). kedudukan skrin relatif dan pencetus skrol pencetus boleh disesuaikan arah tatal, serasi dengan IE6

[Parameter pemalam]

$(".elemen_target").scrollFix( [ "atas" | "bawah" | panjang (boleh negatif, menunjukkan bahagian bawah relatif), [ "atas" | "bawah" ] ]);

Parameter pertama: Pilihan, lalai adalah "atas". Apabila elemen sasaran mencapai kedudukan berbanding skrin, penetapan akan dicetuskan Anda boleh mengisi nilai, seperti 100,-200, dan a nilai negatif bermaksud relatif kepada bahagian bawah skrin

Parameter pertama: Pilihan, lalai ialah "atas", yang bermaksud mencetuskan arah tatal tetap, "atas" bermaksud mencetuskan apabila menatal dari atas ke bawah, "bawah" bermaksud mencetuskan apabila menatal dari bawah ke atas

【Muat turun pemalam】scrollFix(jb51.net).rar

Salin kod Kod adalah seperti berikut:

f0ff38f95f97e9adaf2996656fde08962cacc6d41bbb37262a98f745aa00fbf0
4a26ca5b0e654502c38f3e7ca59cf4a42cacc6d41bbb37262a98f745aa00fbf0
e388a4556c0f65e1904146cc1a846bee38de4fc0f1377dbf639abf16409266be【Contoh Kod】54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
712231cdf4e4ac4bb2ff1b81fe71f40e
09c0dbc96a10fef8c9e2a5dc3783df00$("#a").scrollFix(-200);
dc6dce4a544fdca2df29d5ac0ea9906bMula dibetulkan apabila ditatal ke 200px di bawah, dicetuskan dari atas ke bawah secara lalai16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
8c63c447433cb8884011478337c0a830$("#b").scrollFix(200,"bottom");
dc6dce4a544fdca2df29d5ac0ea9906bMula membetulkan apabila menatal ke 200px di atas, nyatakan "bawah" untuk mencetuskan dari bawah ke atas16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
401db1ee3dbfd4818a4a5454d44296aa$("#c").scrollFix("top","top");
dc6dce4a544fdca2df29d5ac0ea9906bMula membetulkan apabila menatal ke 0 jarak di atas, nyatakan "atas" untuk mencetuskan dari atas ke bawah16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
2624006370d153805b4ddcff1b5707a1$("#d").scrollFix("bottom","top");
dc6dce4a544fdca2df29d5ac0ea9906bMula membetulkan apabila menatal ke 0 jarak di bawah, nyatakan "bawah" untuk mencetuskan dari bawah ke atas16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Kod pelaksanaan:

Salin kod Kod adalah seperti berikut:

4ec11beb6c39d0703d1751d203c17053// 5109f7b28b97633c0f0aaca005b865162cacc6d41bbb37262a98f745aa00fbf0

Kod teras:

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