jQuery scrollFix scroll positioning plug-in_javascript skills

When the user scrolls up or down the page to a certain position, the target element starts to be fixed (position: fixed). When the user scrolls back to the original position, the target element returns to its original state. The relative screen position and trigger of the trigger scroll can be customized. Scroll direction, compatible with IE6

[Plug-in parameters]

$(".target_element").scrollFix( [ "top" | "bottom" | length (can be negative, indicating relative bottom), [ "top" | "bottom" ] ]);

The first parameter: Optional, the default is "top". When the target element reaches the position relative to the screen, the fixation will be triggered. You can fill in a value, such as 100,-200, and a negative value means relative to the bottom of the screen

The first parameter: Optional, the default is "top", which means triggering a fixed scroll direction, "top" means triggering when scrolling from top to bottom, "bottom" means triggering when scrolling from bottom to top

【Download plug-in】scrollFix(jb51.net).rar

Copy code The code is as follows:

f0ff38f95f97e9adaf2996656fde08962cacc6d41bbb37262a98f745aa00fbf0
4a26ca5b0e654502c38f3e7ca59cf4a42cacc6d41bbb37262a98f745aa00fbf0
e388a4556c0f65e1904146cc1a846bee38de4fc0f1377dbf639abf16409266be【Code Example】54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
712231cdf4e4ac4bb2ff1b81fe71f40e
09c0dbc96a10fef8c9e2a5dc3783df00$("#a").scrollFix(-200);
dc6dce4a544fdca2df29d5ac0ea9906bStarts to be fixed when scrolled to 200px below, triggered from top to bottom by default16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
8c63c447433cb8884011478337c0a830$("#b").scrollFix(200,"bottom");
dc6dce4a544fdca2df29d5ac0ea9906bStart fixing when scrolling to 200px above, specify "bottom" to trigger from bottom to top16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
401db1ee3dbfd4818a4a5454d44296aa$("#c").scrollFix("top","top");
dc6dce4a544fdca2df29d5ac0ea9906bStart fixing when scrolling to 0 distance above, specify "top" to trigger from top to bottom16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
712231cdf4e4ac4bb2ff1b81fe71f40e
2624006370d153805b4ddcff1b5707a1$("#d").scrollFix("bottom","top");
dc6dce4a544fdca2df29d5ac0ea9906bStart fixing when scrolling to 0 distance below, specify "bottom" to trigger from bottom to top16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68

Implementation code:

Copy code The code is as follows:

4ec11beb6c39d0703d1751d203c17053// d41da8a09ceffa334c575ce4205f56332cacc6d41bbb37262a98f745aa00fbf0

Core code:

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