A JQuery Implementation of David Walsh's MooTools scrollspy

Overview

jquery-scrollspy

This library is no longer actively supported or maintained.

For similar functionality checkout these other libraries:

--

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.

Contributors

Comments
  • [Question] Is there a way to have only

    [Question] Is there a way to have only "min" value?

    I have an element that should become "fixed" when scrolled beyond certain point. Is there a way to initialise it with a "min" value only? Other than setting "max" to infinity :)

    opened by ArtemGordinsky 2
  • Added a data object named

    Added a data object named "scrollspy" to the element with config options...

    ... so they can be updated after initialization. This is especially useful when an ajax call modifies the dom in such a way that the element is no longer in the same position.

    opened by rbichon 2
  • Does not work at all.

    Does not work at all.

    Which element should I fire the function scrollspy? Can I do like this? $('body').scrollspy({ min: $('#banner').offset().top, onEnter: function() { console.log('enter'); }, onLeave: function() { console.log('leave'); } });

    opened by phuwin 0
  • UglifyJS JavaScript compressor compatibility

    UglifyJS JavaScript compressor compatibility

    When uglify process the scrollspy, there was an error because document was replaced in function parameters at line 6 by a small variable name. Reference to document object was lost until it is given in function call at line 96

    opened by shulard 0
  • Use Bootstrap CDN instead of including in the library

    Use Bootstrap CDN instead of including in the library

    This is bad practice to include another user's library for the purposes of demonstration. The best approach would be to link to a Bootsrap CDN.

    I have removed in my version of this library.

    opened by softwarespot 0
  • Fails JSHint

    Fails JSHint

    Is this being maintained any more? If not I will gladly take over the project or at best become a contributor to the project.Just check out the projects I contributed to and you will see I have a fairly decent understanding of JS/jQuery. I feel this plugin has great potential =)

    There are quire a few errors as well as a possible variable leak with the current code base, that I would fix, but considering PRs aren't being accepted/commented, I am a little reluctant to do so until I have an understanding that the project is still being maintained.

    A couple of things I would change/add:

    • Add bower.json and submit to bower.io inc. semantic versioning [DONE (partially, not submitted)]
    • Fix the JSHint errors [DONE]
    • Refactor the code [DONE]
    • Improve efficiency (selectors aren't being cached or unnecessarily being recreated in a tight loop) [DONE]
    • Swap out deprecated jQuery functionality e.g. bind() => on() [DONE]
    • Add a grunt file for uglification and JS hinting [DONE]
    opened by softwarespot 1
  • Triggering on load?

    Triggering on load?

    Hi - could be my layout - I'm using this with a 100% height div with overflow: auto in that triggers when a "more" classed div is scrolled to. This uses ajax to get more content.

    There may be multiple of these divs on a page since I'm using tabs.

    Unfortunately, whilst it was triggering correctly, in Chrome it was also triggering when the page loads initially. I've patched the code in the following way...

    Line 73 modified to... if (typeof lastTick != 'number' && typeof lastTick!='undefined') { (added to also ignore "undefined" in the trigger.

    This now works for me as expected. Afraid I'm new to Github, so apologies if I've submitted in the wrong place, or not included enough information.

    opened by Cessquill 0
  • create release to set version

    create release to set version

    Hello. Would love add your plugin to Rails Assets but it needs a version number. Can you create a release for this?

    I could easily fork it and create a release from there, but I think it'd be best if Rails Assets references your repo. In case there are updates in the future. Thanks a lot!

    opened by madkap 0
  • [enhancement] Add missing bower.json.

    [enhancement] Add missing bower.json.

    Hey, maintainer(s) of sxalexander/jquery-scrollspy!

    We at VersionEye are working hard to keep up the quality of the bower's registry.

    We just finished our initial analysis of the quality of the Bower.io registry:

    7530 - registered packages, 224 of them doesnt exists anymore;

    We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

    Sadly, your library sxalexander/jquery-scrollspy is one of them.

    Can you spare 15 minutes to help us to make Bower better?

    Just add a new file bower.json and change attributes.

    {
      "name": "sxalexander/jquery-scrollspy",
      "version": "1.0.0",
      "main": "path/to/main.css",
      "description": "please add it",
      "license": "Eclipse",
      "ignore": [
        ".jshintrc",
        "**/*.txt"
      ],
      "dependencies": {
        "<dependency_name>": "<semantic_version>",
        "<dependency_name>": "<Local_folder>",
        "<dependency_name>": "<package>"
      },
      "devDependencies": {
        "<test-framework-name>": "<version>"
      }
    }
    
    

    Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

    NB! Please validate your bower.json with jsonlint before commiting your updates.

    Thank you!

    Timo, twitter: @versioneye email: [email protected] VersionEye - no more legacy software!

    opened by timgluz 2
  • Window Bottom is recognized as 'leaving'

    Window Bottom is recognized as 'leaving'

    Hi,

    I found this issue while using your plugin on our website. I made a little video to show you what is happening. Focus on the black and white logo in the nav bar. This also happens in your example code. Issue confirmed in Safari/Chrome on Win/Mac; https://dl.dropbox.com/u/14655800/scrollspyBug.m4v

    I used to fix this issue by adding: max: $('body').height() to the options

    Cheers, Wolfgang

    opened by wschwaiger 0
Owner
Sam Alexander
Hi. I'm a Fractional CTO who helps creative entrepreneurs build amazing things on the internet.
Sam Alexander
A ScrollSpy library for detecting enter/exit of elements in the viewport when the user scrolls

jquery-scrollspy A jQuery plugin for detecting enter/exit of elements in the viewport when the user scrolls. New Features Added a couple new features:

John Smart 276 Jul 1, 2022
ScrollSpy in pure JavaScript

VanillaJS ScrollSpy ScrollSpy in pure JavaScript. Browser Support IE 10+ ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ Installation $ npm install vanillajs-sc

Eder Sampaio 46 Dec 13, 2022
Dependency-free implementation of zoom.js (no jQuery or Bootstrap)

ZOOM.JS Repo status Nov 2020: Maintained, but bug fixes only. No new features currently, please. There may eventually be a new major version with new

Nishanth Shanmugham 1.3k Jan 3, 2023
JQuery charCounter - jQuery Character Counter Plugin

jQuery Character Counter A jQuery based character counter for <input> and <textarea> HTML tags. What is this? This simple plugin allows you to add a c

mmmm_lemon 1 Aug 10, 2022
Jquery-actualizer - jQuery ajax actualizer

jQuery AJAX Actualizer Include jQuery & this plugin into your HTML file and use this js code: $('#target').actualizer('a'); On click at any A element,

Šimon (Simon) Rataj 1 Jul 28, 2020
jQuery quick notification plugin. jQuery плагин быстрых уведомлений

Note: English translation by Google Translate Notific About Description: this is a jQuery plugin that helps you display notifications on your site. Li

Webarion 2 Nov 7, 2021
jquery-input-mask-phone-number.js - A simple, easy jquery format phone number mask library

jquery-input-mask-phone-number A jQuery Plugin to make masks on input field to US phone format. Quick start 1. Add latest jQuery and jquery-input-mask

Raja Rama Mohan Thavalam 12 Aug 25, 2022
Javascript implementation of flasher tool for Espressif chips, running in web browser using WebSerial.

Javascript implementation of esptool This repository contains a Javascript implementation of esptool, a serial flasher utility for Espressif chips. Un

Espressif Systems 103 Dec 22, 2022
Fast & minimal implementation of bech32, base64, base32, base16 & base58

micro-base Fast and minimal implementation of bech32, base64, base58, base32 & base16. Matches following specs: Bech32, Bech32m: BIP173, BIP350 Base16

Paul Miller 45 Jan 4, 2023
An implementation for FIWARE Orion and Cygnus on AWS.

FIWARE: Orion and Cygnus on AWS This guide will help you to deploy Fiware's Orion and Cygnus components into a serverless architecture. What does this

AWS Samples 6 Sep 21, 2022
A JavaScript implementation of Michael Baker's Miner2149

miner2149-js A JavaScript implementation of Michael Baker's Miner2149. This repository is for personal use only. Not for commercial use or distributio

Gabrien Symons 1 Jan 11, 2022
A fast simplex noise implementation in Javascript.

simplex-noise.js API Documentation simplex-noise.js is a simplex noise implementation in Javascript/TypeScript. It works in the browser and nodejs. Us

Jonas Wagner 1.2k Jan 2, 2023
A javascript text differencing implementation.

jsdiff A javascript text differencing implementation. Based on the algorithm proposed in "An O(ND) Difference Algorithm and its Variations" (Myers, 19

Kevin Decker 6.8k Jan 7, 2023
javascript implementation of logistic regression/c4.5 decision tree

LearningJS: A Javascript Implementation of Logistic Regression and C4.5 Decision Tree Algorithms Author: Yandong Liu. Email: yandongl @ cs.cmu.edu Upd

Yandong Liu 67 Aug 19, 2022
NodeJS Implementation of Decision Tree using ID3 Algorithm

Decision Tree for Node.js This Node.js module implements a Decision Tree using the ID3 Algorithm Installation npm install decision-tree Usage Import

Ankit Kuwadekar 204 Dec 12, 2022
This is a nodejs implementation of the python example

DOC This is a nodejs implementation of the python example provided in https://github.com/EnAccess/OpenPAYGO-Token. In case of anything please feel fre

Shadrack Lilan 2 Jan 25, 2022
[WIP] WebGL API implementation for Deno, built on GLFW using FFI.

Note I'm no longer working on this project because I have just realized macOS does not support OpenGL ES API, and adding Desktop GL backend to this mo

DjDeveloper 14 Jun 11, 2022
Audited & minimal implementation of BIP39 mnemonic phrases

scure-bip39 Secure, audited & minimal implementation of BIP39 mnemonic phrases. Developed for js-ethereum-cryptography. Check out scure-bip32 if you n

Paul Miller 47 Dec 25, 2022
open-source implementation of the Turborepo custom remote cache server.

This project is an open-source implementation of the Turborepo custom remote cache server. If Vercel's official cache server isn't a viable option, th

Maksim Sinik 362 Dec 30, 2022