jQuery scrollFix scroll positioning plug-in_javascript skills-JS Tutorial-php.cn

jQuery scrollFix scroll positioning plug-in_javascript skills

WBOY

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

Original

1350 people have browsed it

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:

【Code Example】

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

Starts to be fixed when scrolled to 200px below, triggered from top to bottom by default

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

Start fixing when scrolling to 200px above, specify "bottom" to trigger from bottom to top

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

Start fixing when scrolling to 0 distance above, specify "top" to trigger from top to bottom

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

Start fixing when scrolling to 0 distance below, specify "bottom" to trigger from bottom to top

Implementation code:

Copy code The code is as follows:

Core code:

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

Copy after login