jQuery Scroll Detection plugin by Eric Ellenbrook

This page features jQuery Scroll Detection written by Eric Ellenbrook. The settings are as follows:

testMode: true
targetPercent: 70
position: "left"
width: 500
target: "#leftPosition"

This translates to you seeing the scroll percentage at the bottom right of the page, the element will slide out from the left once the page has been scrolled 70%, and it will hide once it's been scrolled back up. The rest of the text on this page is the readme from Github.

jQuery Scroll Detection

jQuery Scroll Detection is a simple plugin that allows you to do something when your user scrolls to a specific depth into your webpage. Some useful ideas might include:

Showing a navigation menu to stop users from scrolling back to the top to navigate away from the page.
Sliding in social media buttons when a user reaches the end of an article.
Fading in a "back to top" icon when users reach the bottom of your page.
Just about anything else you might think of.

As you can see there are plenty of uses for this so it's up to you to be creative on as to how you can use it. The possibilities are endless.

How to use

It's incredibly easy to use. Simply downloaded jQuery Scroll Detection and include it after you include jQuery.

	
  <script src="path/to/jquery.js"></script>
  <script  src="path/to/jquery-scroll-detection.js"></script>
</body>

Once you've got that complete, the rest is easy. Simply include the script and add the settings you'd like and it just works.

The example below has testMode turned on, activates when the page is scrolled 40%, acts on a target with an id of #leftPosition with a width of 500px and it will slide in front the left.

	
    <script src="path/to/jquery.js"></script>
    <script src="path/to/jquery-scroll-detection.js"></script>
    <script>
    $(document).ready( function() {
        $(window).detectScroll({
            testMode: true,
            targetPercent: 40,
            position: "left",
            target: "#leftPosition"
            width: 500,
        });
    });
    </script>
</body>

Default settings

jQuery Scroll Detection can take a number of settings when initialized. Below is a list of the settings and their options or what they control.

position: The position in which the action will be taking place. Fade means it will fade in or out. Accepts "top", "right", "bottom", "left", "fade".
target: The ID of the container you wish to modify upon page scroll.
testMode: Turning on will display the percentage scrolled. Turning off will hide it. Accepts: true or false.
targetPercentage: This is the percentage in which the plugin will activate. Accepts: integer 1 to 100.
objectHeight: This is the height of the object being modified. It is only necessary to define this setting if your position is set to top or bottom. Accepts: any integer. do not add "px" to the end.
objectWidth: This is the width of the object being modified. It is only necessary to define this setting if your position is set to left or right. Accepts any integer. do not add "px" to the end.
speed: This is the speed at which you'd like the action to take place in milliseconds. By default it is set to 400ms. The higher the number, the slower the change.

Questions

I do not understand how to use it. - Here is a page with it in action. Does that help clear things up a bit? (Hint: take a look at the source code.)

What is testMode? - It's just a way to visualize what percentage the page is scrolled. if you set testMode to true it will display a small counter on the bottom right corner of the screen allowing you to visualize exactly what the percentage scrolled is.