jQuery scrollFix scroll location plug in

When the user scrolls up or down the page to 1 fixed position, the target element starts fixed positioning (position:fixed). When the user rolls back to the original position, the target element returns to the original state. You can customize the trigger scroll relative to the screen position and the trigger scroll direction, which is compatible with IE6

[plug-in parameters]

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

Parameter 1: optional. The default is "top". When the target element reaches the position opposite the screen, it will trigger fixation

Parameter 1: optional, default is "top" to trigger a fixed scrolling direction, "top" to trigger when scrolling down from the top, and "bottom" to trigger when scrolling up from the bottom

scrollFix(ofstack.com).rar

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>

<script type="text/javascript" src="scrollFix.js"></script>

<p><span style="color: #808000;"> [code example] </span></p>

<div class="d">

<div class="demo" style="background: #ff6000;">$("#a").scrollFix(-200);

<div> Scroll down the distance 200px The default is triggered from top to bottom </div>

</div>

&nbsp;</div>

<div class="d">

<div class="demo" style="background: #82BF00;">$("#b").scrollFix(200,"bottom");

<div> Scroll up to the distance 200px When start fixed, specify "bottom" Trigger from bottom to top </div>

</div>

&nbsp;</div>

<div class="d">

<div class="demo" style="background: #0C9CAE;">$("#c").scrollFix("top","top");

<div> Scroll up to the distance 0 When start fixed, specify "top" Trigger from top to bottom </div>

</div>

&nbsp;</div>

<div class="d">

<div class="demo" style="background: #478FCE;">$("#d").scrollFix("bottom","top");

<div> Scroll down the distance 0 When start fixed, specify "bottom" Trigger from bottom to top </div>

</div>

</div>

Implementation code:

<script type="text/javascript">// <![CDATA[

window.onload=function(){

  $(".demo:eq(0)").scrollFix(-200);

  $(".demo:eq(1)").scrollFix(200,"bottom");

  $(".demo:eq(2)").scrollFix("top","top");

  $(".demo:eq(3)").scrollFix("bottom","bottom");

}

// ]]></script>

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" ? dir : "top"; // The default scrolling direction is down 
   if (window.XMLHttpRequest) { // non ie6 with fixed


    function getHeight() { //>=0 Indicates that the scrolling height above is greater than or equal to the target height 
     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) { // Execute only before recovery 1 Time, reduce 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)) { // The end of the 
      that[0].style.position = "static";
      p.replaceChild(that[0], r);
      r = null;
      oldHeight = false;
     } else { // rolling 
      that.css({
       left: l,
       top: height + document.documentElement.scrollTop
      })
     }
    });
   }
  });
 };
})(jQuery);