JQuery Scrollfix Scroll Locator Plugin

"Plug-in Features"

When the user scrolls up or down the page to a certain position, the target element starts fixed positioning (position:fixed), and when the target element reverts back to its original position, it can be customized to trigger the scrolling relative to the screen position and trigger the scrolling direction, compatible with the 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 to the screen relative to the position of the start trigger fixed, you can fill a value, such as 100,-200, negative value is relative to the bottom of the screen

First parameter: Optional, default is "Top", indicating that a fixed scroll direction is triggered, "top" is triggered when scrolling from top to bottom, "bottom" is triggered when scrolling from the bottom up

"Download Plugin"

Download plugin (download)

"Code Sample"

$ ("#a"). Scrollfix (-200); Scroll to 200px at the beginning of the fixed, the default from top to bottom trigger $ ("#b"). Scrollfix ("Bottom"), scroll to 200px from above to start fixed, specify "bottom" Trigger $ ("#c") from bottom to top. Scrollfix ("Top", "top"), scroll to the distance above 0 o'clock to start pinning, specify "top" to trigger from top to bottom $ ("#d"). Scrollfix ("Bottom", "top"); Scroll to the distance below 0 o'clock to start pinning, specify "bottom" to trigger from bottom to top

;(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 = $ (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 above scroll height is equal to the target height of return (document.documente Lement.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) {//redo only once before recovery, reducing 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) < Oldhei ght) | | (dir = = "Bottom" && (Document.documentElement.scrollTop | | document.body.scrollTop) > OldHeight))            {//End that[0].style.position = "static";            P.replacechild (That[0], R);            R = null;          OldHeight = false;            } else {//scroll that.css ({left:l, top:height + document.documentElement.scrollTop      })          }        });  }    }); };}) (JQuery);

Original address: https://www.cnblogs.com/Hodor/archive/2012/07/25/2607831.html

JQuery Scrollfix Scroll Locator Plugin