{"id":20838224,"url":"https://github.com/dynamicdriverepo/ddscrollspy","last_synced_at":"2025-05-08T20:35:25.816Z","repository":{"id":6621295,"uuid":"7864870","full_name":"dynamicdriverepo/ddscrollspy","owner":"dynamicdriverepo","description":null,"archived":false,"fork":false,"pushed_at":"2014-08-06T19:25:40.000Z","size":139,"stargazers_count":12,"open_issues_count":2,"forks_count":4,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-30T05:32:02.144Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dynamicdriverepo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-01-28T07:07:40.000Z","updated_at":"2017-09-21T13:26:12.000Z","dependencies_parsed_at":"2022-09-16T18:11:15.733Z","dependency_job_id":null,"html_url":"https://github.com/dynamicdriverepo/ddscrollspy","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dynamicdriverepo%2Fddscrollspy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dynamicdriverepo%2Fddscrollspy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dynamicdriverepo%2Fddscrollspy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dynamicdriverepo%2Fddscrollspy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dynamicdriverepo","download_url":"https://codeload.github.com/dynamicdriverepo/ddscrollspy/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253146166,"owners_count":21861349,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T01:09:42.459Z","updated_at":"2025-05-08T20:35:25.779Z","avatar_url":"https://github.com/dynamicdriverepo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DD ScrollSpy Menu #\n\n*Description:* For long pages with lots of content, keeping the user oriented and knowing where within the page he/she is at all times can be challenging. DD ScrollSpy Menu solves this problem, by letting you create a menu whose menu items are automatically highlighted based on the portion of the page the user is currently viewing. As the user scrolls the page, the menu item that points to that section is highlighted (via the injection of a desired CSS class to style it). The script also works on scrollable DIVs within the page to spy on their scroll positions instead. Starting in v1.2, you can now also enable a progress bar to be shown inside each spymenu's menu item to show a progress of how much the user has scrolled within the currently viewed section. DD ScrollSpy \"spies\" on the visitor's position on the page, but for their benefit (and in turn yours)!\n\n## Directions ##\n\n*Step 1:* This script uses the following external files:\n\n+ jQuery 1.7 or above (served via Google CDN)\n+ ddscrollspy.js\n+ ddscrollspydemo.css\n\n*Step 2:* Add the below code to the HEAD section of your page:\n\n\t\u003clink rel=\"stylesheet\" href=\"ddscrollspydemo.css\" /\u003e\n\t\n\t\u003cscript type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js\"\u003e\u003c/script\u003e\n\t\n\t\u003cscript src=\"ddscrollspy.js\"\u003e\n\t\n\t/*\n\t* DD ScrollSpy Menu Script (c) Dynamic Drive (www.dynamicdrive.com)\n\t* Last updated: Aug 1st, 14'\n\t* Visit http://www.dynamicdrive.com/ for this script and 100s more.\n\t*/\n\t\n\t\u003c/script\u003e\n\t\n\t\u003cscript\u003e\n\t\n\tjQuery(function($){ // on document load\n\t\t$('#horizontalmenu').ddscrollSpy({ // initialize first demo\n\t\t\tscrolltopoffset: -50\n\t\t})\n\t\n\t\t$('#verticalspymenu').ddscrollSpy({ // initialize 2nd demo\n\t\t\tspytarget: document.getElementById('contentcontainer'),\n\t\t\tenableprogress: 'progress',\n\t\t\tscrollduration: 300 // \u003c-- no comma after last option!\n\t\t})\n\t})\n\t\n\tfunction dynamicadditem(){ // function that dynamically adds a new menu item to first demo, spying on #para6\n\t\t$('#verticalspymenu').append('\u003cli\u003e\u003ca href=\"#para5\"\u003eParagraph 5\u003c/a\u003e\u003c/li\u003e')\n\t\t$('#verticalspymenu').trigger('updatespy')\n\t}\n\t\n\t\u003c/script\u003e\n\n\n*Step 3:* Then, add the below sample markup to your page:\n\n\t\u003c!-- Scroll Spy Menu 1 --\u003e\n\t\n\t\u003cul id=\"horizontalmenu\" class=\"underlinemenu\"\u003e\n\t\u003cli\u003e\u003ca href=\"#section1\"\u003eSection 1\u003c/a\u003e\u003c/li\u003e\n\t\u003cli\u003e\u003ca href=\"#section2\"\u003eSection 2\u003c/a\u003e\u003c/li\u003e\n\t\u003cli\u003e\u003ca href=\"#section3\"\u003eSection 3\u003c/a\u003e\u003c/li\u003e\n\t\u003cli\u003e\u003ca href=\"#section4\"\u003eSection 4\u003c/a\u003e\u003c/li\u003e\n\t\u003cli\u003e\u003ca href=\"#section5\"\u003eSection 5\u003c/a\u003e\u003c/li\u003e\n\t\u003c/ul\u003e\n\t\n\t\u003c!-- Scroll Spy Menu 2 --\u003e\n\t\n\t\u003cdiv style=\"float:left; margin-right:15px; width:150px; margin-top: 120px\"\u003e\n\t\t\u003cul  id=\"verticalspymenu\" class=\"shadowblockmenu-v\"\u003e\n\t\t\u003cli\u003e\u003ca href=\"#para1\"\u003eParagraph 1\u003c/a\u003e\u003c/li\u003e\n\t\t\u003cli\u003e\u003ca href=\"#para2\"\u003eParagraph 2\u003c/a\u003e\u003c/li\u003e\n\t\t\u003cli\u003e\u003ca href=\"#para3\"\u003eParagraph 3\u003c/a\u003e\u003c/li\u003e\n\t\t\u003cli\u003e\u003ca href=\"#para4\"\u003eParagraph 4\u003c/a\u003e\u003c/li\u003e\n\t\t\u003c/ul\u003e\n\t\n\t\u003cbr /\u003e\n\t\u003ca href=\"javascript:dynamicadditem()\" style=\"font-weight:bold\"\u003eClick to dynamically add another menu item\u003c/a\u003e\n\t\n\t\u003c/div\u003e\n\t\n\t\u003c!-- Contents that Scroll Spy Menu 2 is spying on --\u003e\n\t\n\t\u003cdiv id=\"contentcontainer\" style=\"width:500px; height:200px; overflow-y:scroll; border:1px solid gray; font:bold 18px Arial; float:left; background:yellow; position:relative; margin-top: 120px\"\u003e\n\t\t\u003cp id=\"para1\" style=\"height:400px; background:#d5e9b2\"\u003eParagraph 1\u003c/p\u003e\n\t\t\u003cp id=\"para2\" style=\"height:600px; background:#f7de90\"\u003eParagraph 2\u003c/p\u003e\n\t\t\u003cp id=\"para3\" style=\"height:700px; background:#9af5ed\"\u003eParagraph 3\u003c/p\u003e\n\t\t\u003cp id=\"para4\" style=\"height:500px; background:#fbd0e3\"\u003eParagraph 4\u003c/p\u003e\n\t\t\u003cp id=\"para5\" style=\"height:300px; background:#cbffe1\"\u003eParagraph 5\u003c/p\u003e\n\t\u003c/div\u003e\n\t\n\t\u003cbr style=\"clear:left\" /\u003e\n\t\n\t\u003c!-- Contents that Scroll Spy Menu 1 is spying on --\u003e\n\t\n\t\u003cdiv id=\"section1\" style=\"height:300px;\"\u003e\n\t\u003ch2\u003eThis is section 1\u003c/h2\u003e\n\t\u003c/div\u003e\n\t\n\t\u003cdiv id=\"section2\" style=\"height:400px;\"\u003e\n\t\u003ch2\u003eThis is section 2\u003c/h2\u003e\n\t\u003c/div\u003e\n\t\n\t\u003cdiv id=\"section3\" style=\"height:700px;\"\u003e\n\t\u003ch2\u003eThis is section 3\u003c/h2\u003e\n\t\u003c/div\u003e\n\t\n\t\u003cdiv id=\"section4\" style=\"height:600px;\"\u003e\n\t\u003ch2\u003eThis is section 4\u003c/h2\u003e\n\t\u003c/div\u003e\n\t\n\t\u003cdiv id=\"section5\" style=\"height:1000px;\"\u003e\n\t\u003ch2\u003eThis is section 5\u003c/h2\u003e\n\t\u003c/div\u003e\n\n## DD ScrollSpy Menu set up ##\n\nSee script project page for additional details on setup and documentation: \u003chttp://www.dynamicdrive.com/dynamicindex1/ddscrollspymenu.htm\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdynamicdriverepo%2Fddscrollspy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdynamicdriverepo%2Fddscrollspy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdynamicdriverepo%2Fddscrollspy/lists"}