Giter VIP home page Giter VIP logo

jquery-scrollspy's Introduction

jquery-scrollspy

An adaptation of the Mootools Scrollspy ( http://davidwalsh.name/mootools-scrollspy ) plugin for jQuery

(c) 2011 Samuel Alexander ([email protected])

Released under The MIT License.

Description:

scrollspy is a simple jQuery plugin for firing events based on where the user has scrolled to in a page.

Homepage:

http://github.com/sxalexander/jquery-scrollspy

Source:

Hosted at GitHub; browse at:

http://github.com/sxalexander/jquery-scrollspy/tree/master

Or clone from:

git://github.com/sxalexander/jquery-scrollspy.git

Usage:

  1. Insert the necessary elements in your document's <head> section, e.g.:

     <script type='text/javascript' src='/javascripts/jquery.scrollspy.js'></script>
    

Remember to include jquery.scrollspy.js after including the main jQuery library.

  1. Initialise scrollspy in your document.onload, e.g.:

     <script type='text/javascript'>
         $(document).ready(function() {
     			$('#sticky-navigation').scrollspy({
     				min: $('#nav').offset().top,
     				onEnter: function(element, position) {
     					$("#nav").addClass('fixed');
     				},
     				onLeave: function(element, position) {
     					$("#nav").removeClass('fixed');
     				}
     			});
     		});
     </script>
    

Check out the /examples for more info !

Documentation:

Options for ScrollSpy include:

min: (defaults to 0) The minimum value of the X or Y coordinate, depending on mode.
max: (defaults to 0) The maximum value of the X or Y coordinate, depending on mode.
mode: (defaults to 'vertical') Defines whether to listen to X or Y scrolling.
container: (defaults to window) The element whose scrolling to listen to.

Events for ScrollSpy include:

scrollTick: Fires on each scroll event within the min and max parameters. Receives as parameters:

    position: an object with the current X and Y position.
    inside: a Boolean value for whether or not the user is within the min and max parameters
    enters: the number of times the min / max has been entered.
    leaves: the number of times the min / max has been left.

scrollEnter: Fires every time the user enters the min / max zone.
        position: an object with the current X and Y position.
        enters: the number of times the min / max has been entered.

scrollLeave: Fires every time the user leaves the min / max zone.
        position: an object with the current X and Y position.
        leaves: the number of times the min / max has been left.

A note on forking:

By forking this project you hereby grant permission for any commits to your fork to be merged back into this repository and, with attribution, be released under the terms of the MIT License.

jquery-scrollspy's People

Contributors

allnightlong avatar clslrns avatar martl avatar sxalexander avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.