jQuery scrollFix kemahiran plug-in_javascript kedudukan skrol-tutorial js-php.cn

jQuery scrollFix kemahiran plug-in_javascript kedudukan skrol

WBOY

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

asal

1329 orang telah melayarinya

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:

【Contoh Kod】

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

Mula dibetulkan apabila ditatal ke 200px di bawah, dicetuskan dari atas ke bawah secara lalai

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

Mula membetulkan apabila menatal ke 200px di atas, nyatakan "bawah" untuk mencetuskan dari bawah ke atas

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

Mula membetulkan apabila menatal ke 0 jarak di atas, nyatakan "atas" untuk mencetuskan dari atas ke bawah

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

Mula membetulkan apabila menatal ke 0 jarak di bawah, nyatakan "bawah" untuk mencetuskan dari bawah ke atas

Kod pelaksanaan:

Salin kod Kod adalah seperti berikut:

Kod teras:

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

Salin selepas log masuk