It's a tiny freeware library on TypeScript to sinhronize page scrolling and navigation meny-bar.

Overview

Scroll progress (dual-side-scroll) v1.2.3

npm npm npm bundle size GitHub license

Assignment

This tiny plugin is designed to show the progress of the page scrolling interactively. There are two types of actions: onScrolled and onChanged. They can be used together or separately.

  • onScrolled - returns to the progress for each scroll event. It is convenient to use when you need to display progress in real time.
  • onChanged - works only when one paragraph is replaced to another. This is useful for switching the active menu item in the navigation block.

LiveDemo

How does it work?

All you need is a navigation menu with links to the relevant paragraphs in the text. When initializing an object, you need to specify cursor and menu selectors, as well as a callback function.

When the onScrolled event is used, an object will be sent to the processing unit:

    Progress {
        // id of current paragraph
        Id: string;
        // % of paragraph being reviewed
        Percent: number;
    }

When the onChanged event is used, the id of the current paragraph will be sent to the processing unit.

When the window is changed in size, the script automatically will be adjuscted to the proportional value. This is sometimes needed in the mobile version. When the device screen is rotated, the scrolling will continue to work correctly.

Installation

npm i dual-side-scroll

Take the minified version of the script from dist and place it in your application directory. Make sure the plugin connection string is located above the connection string of your scripts.

<script src="./<your_js_directory>/scroll-progress.min.js"></script>

For debugging purposes, there is an unminified version with sourcemap.

Example

The source code of the page LiveDemo script.

document.addEventListener("DOMContentLoaded", function (event) {
    let currentParagraphName = document.getElementById('current-paragraph-name');
    let currentParagraphPercent = document.getElementById('current-paragraph-percent');

    new ScrollProgress.Init(
        "#cursor",
        "menu",
        progress => {
            currentParagraphName.innerText = document.getElementById(progress.Id).innerText;
            currentParagraphPercent.innerText = progress.Percent + '%';
        },
        id => {
            document.querySelectorAll('a[href*="link"]')
                .forEach(element => 
                    element.classList.remove('active-meny-item')
                );
            document.querySelector(`[href="#${id}"]`).classList
                .add('active-meny-item');
        }
    );
});

Planned updates

  • Interactive cursor to scroll the page
  • Bookmarks in paragraphs
You might also like...

Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.

parallax-vanilla.js Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra perfo

Dec 16, 2022

A cross-platform AutoHotKey-like thing with TypeScript as its scripting language

suchibot A cross-platform AutoHotKey-like thing with JavaScript/TypeScript as its scripting language. Built on top of uiohook-napi and nut.js. Install

Sep 21, 2022

An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone.

An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone.

An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone

Dec 30, 2022

🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

🍭 search-buddy ultra lightweight javascript plugin that can help you create instant search and/or facilitate navigation between pages.

🍭 search-buddy search-buddy is an open‑source ultra lightweight javascript plugin (* 1kb). It can help you create instant search and/or facilitate n

Jun 16, 2022

jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

jSide Menu is a well designed, simple and clean side navigation menu with dropdowns.

jQuery jSide Menu jSide Menu is a well designed, simple and clean side navigation menu with dropdowns. Browse: Live Demo & Using Guide Main Features F

Feb 14, 2022

Simple click-triggered navigation submenus. Accessible and progressively enhanced.

Clicky Menus! A project by Mark Root-Wiley, MRW Web Design Clicky Menus lets you create a progressively-enhanced, accessible one-level dropdown menu t

Dec 6, 2022

Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Bootstrap 4 stylesheet that implements vertically-oriented navigation tabs.

Responsive Vertical Navigation Tabs for Boostrap 4 New! 💥 If you use Bootstrap 5, a new package is available for that: bootstrap-5-vertical-tabs A st

Aug 4, 2022

A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too!

astro-navigation A plugin for creating hierarchical navigation in Astro projects. Supports breadcrumbs too! Full docs coming soon! Basic usage This pa

Dec 19, 2022

deadsimple immersive navigation: a single-player-verse component

deadsimple immersive navigation: a single-player-verse component

AFRAME-verse, deadsimple immersive navigation A single-player-verse component for AFRAME: TRY THE ONLINE DEMO ❤️ easily teleport between aframe apps &

Nov 29, 2022
Comments
  • Children element not worked.

    Children element not worked.

    Hi. I'm try do that:

    <ul>
        <li><a href="#link1">wwww 1</a></li>
        <li><a href="#link2">wwww 2</a></li>
        <li><a href="#link3">wwww 3</a></li>
        <li><a href="#link4">wwww 4</a></li>
    </ul>
    

    And get this error:

    Uncaught Error: Menu item 'wwww 1 wwww 2 wwww 3 wwww 4' has not link to paragraph. at menu.ts:55 at Array.map () at Menu.MapToMenuItems (menu.ts:53) at new Menu (menu.ts:21) at new Page (page.ts:29) at new Init (scroll-init.ts:27) at HTMLDocument. (app.js:18)

    Thank you.

    bug 
    opened by spilbertina 0
Releases(1.2.1)
jQuery plugin to show a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML pages.

jquery.simpletabs v1.2.3 The jquery.simpletabs plugin shows a tabs bar for navigation. The tabs can be defined once, and shared across multiple HTML p

Peter Thoeny 1 Feb 23, 2022
Scrolling navigation component for web apps

Slinky.js Create beautiful scrolling driven navigation lists with stacking headers that remain visible at all times. Scroll around on the plugin homep

Sorin Iclanzan 201 Nov 16, 2022
jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light <7ko min.js and <1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Renan LAVAREC 2 Jan 18, 2022
It's a repository to studies. Its idea is to learn about Nx and its plugins.

StudyingNx This project was generated using Nx. ?? Smart, Fast and Extensible Build System Adding capabilities to your workspace Nx supports many plug

Open-ish 4 May 13, 2022
Can see everything, beware of its omniscience, kneel before its greatness.

Can see everything, beware of its omniscience, kneel before its greatness. Summary Presentation Installation Removing Credits Presentation Main goal T

Duc Justin 3 Sep 30, 2022
🔨 Cross-browser JavaScript library to disable scrolling page

scroll-lock Cross-browser JavaScript library to disable scrolling page Live demo | README на русском New features 2.0 More advanced touch event handli

null 253 Dec 17, 2022
Super lighweight, pure JavaScript page load progress bar

Nanobar Super lighweight, pure JavaScript page load progress bar Status View Preview Table of contents Status Quick Start What's included Bugs and fea

The MUDA Organization 5 Jan 3, 2022
"Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read random math-related quotes. Its built using react

Math Magician "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations a

Charles Gobina 5 Feb 23, 2022
The awesomebooks project is a simple list, but separated into 3 parts and given a retro feel. The main page is where we can add books, and on another page we can see the list, and remove items. There is also a "contact-us" page.

Awesome Books This is the restructured version of the famous awesome-books project! Here you can find JavaScript broken into modules, using import-exp

Matt Gombos 12 Nov 15, 2022
Responsive navigation plugin without library dependencies and with fast touch screen support.

Responsive Nav Responsive navigation plugin without library dependencies and with fast touch screen support. Responsive Nav is a tiny JavaScript plugi

Viljami Salminen 4.1k Dec 29, 2022