• Support
  • Community Site
  • Login
617.471.4440
PaperThin Inc.
Web Content & Experience Management
  • Solutions

    Solutions That Drive Value

    Solutions By Category

    Solutions By Topic

    Solutions By Industry

    All Solutions

    Solutions That Drive Value

    • Web Content Management
    • Experience & Content Marketing
    • Website Optimization
    • Mobile & Responsive Design
    • IT Excellence
    • System Management & Development

    Solutions By Industry

    • Higher Education
    • Government
    • Healthcare
    • Associations
    • Legal
    • All Solutions
    • Solutions List
  • Product

    Product Offerings

    Features

    CommonSpot Cloud

    Cloud or On Premises

    Widget Gallery

    Product Offerings

    • CommonSpot CMS
    • Digital Marketing Engine
    • Marketing Optimization Tools
    • IT & Developer Tools
    • Cloud or On Premises
    • CommonSpot Cloud
    • Deployment Options
    • Widget Gallery

    Features For:

    • Marketers
    • Designers & Developers
    • Administrators
    • Content Contributors
    • All Features
    • Feature List
  • Services

    Services Overview

    CommonSpot Training

    Customer Support

    Professional Services

    World Class Services

    • CommonSpot Training
    • Customer Support
    • Professional Services
  • Customers

    Spotlight Customers

    Testimonials

    Our Customers

    • Spotlight Customers
    • Testimonials
  • Company

    About PaperThin

    Contact Us

    Directions

    Blog

    Videos & Webinars

    PaperThin Community

    About PaperThin

    • About Us
    • News
    • Employment
    • Contact Us
    • Directions

    PaperThin Resources

    • Blog
    • Videos & Webinars
    • PaperThin Community
  • Blog
  • Subscribe
  • Search
  • Login
Get Demo Subscribe

ScrollSpy Navigation Widget

Get Demo
  • Home
  •  Widget Gallery
  •  ScrollSpy Navigation Widget
This widget renders a dynamically generated Bootstrap ScrollSpy as a sidebar jump menu that stays in a fix position next to the page content as the user scrolls. The ScrollSpy jump menu links are dynamically generated from the H2 and H3 html tags found in the content added to the container element.
ScrollSpy Navigation Widget - Initial

ScrollSpy Navigation Widget - Initial menu state

ScrollSpy Navigation Widget - expanded

ScrollSpy Navigation Widget - Menu after scrolling

  • Overview
  • General Properties
  • Element Properties
  • Installation
  • Docs

This CommonSpot Widget, Scroll Spy, renders a jump menu with auto-generated from the H2 and H3 html tags found in the page content. This widget is built as a container render handler so the ScrollSpy jump menu is added to the page in a responsive column next to the content placed in the container.

 

This widget comes with a Custom Render Handler for the CommonSpot Container Standard Element and a Custom Metadata Form. The Metadata Form is bound to the Render Handler and is used to offer the widget specific configuration options.

With several options, like selecting Scroll Spy’s Scroll and Affix Offsets, setting the Link, Active and Hover colors, selecting the menu position as well as setting two column Grid proportions for Large, Medium, Small and X-Small devices, this widget can be configured to display to fit your needs.

For developers, the configurable Widget Options, the Custom Render Handler file and the included Cascading Style Sheet and JavaScript files can be customized fit your specific display scenario.

The Scroll Spy Widget offers the following configurable properties via the Custom Metadata Form bound to the standard element Custom Render Handler:

Scroll Spy Options (tab)

  • Enable Menu - yes or no
  • Fixed Menu Top - The number of pixels for the top fixed position of the Jump Menu.
  • Affix Offset - The number of pixels used to calculate the Jump Menu's fixed position.
  • Scroll Offset - The number of pixels to offset from the top when calculating the position of scroll.

Text & Link Properties (tab)

  • Title Text - Title that renders above the Jump Menu
  • Title Style
    • Tag - p, div, h1, h2, h3, h4, h5
    • Align - left, center, right or inherit
    • Font Settings
      • Bold
      • Italic
      • Underline
      • Initial Case
      • Title Case
      • Upper Case
      • Lower Case
    • Color - many color options including 'not set'
  • Menu Links Style
    • Font Settings
      • Bold
      • Italic
      • Underline
      • Initial Case
      • Title Case
      • Upper Case
      • Lower Case
    • Link Color - many options including 'not set'
    • Hover Color - many options including 'not set'
    • Active Color - many options including 'not set'

Scroll Spy Layout (tab)

  • Menu Position - right or left - Place the Jump Menu on the Right or the left of the Page.
  • Columns For Device - Responsive design options include various percentages and hidden
    • Small Phone
    • Phone
    • Tablet
    • Desktop
    • Large Desktop
  • The size options for each column type are: hidden, 50%/50%, 66%/33%, 75%/25%, 83%/17%, 92%/8%

 

CommonSpot Standard Elements:

Layout Elements:

  • Container

Required Custom Elements

Metadata Form:

  • CSW Scroll Spy

Custom Render Handler:

  • CSW Scroll Spy Container

The ScrollSpy Navigation Widget has the following downloadable components:

  • Standard Container Element
  • Metadata Form
  • Generic Render Handler

Because this widget's render handler is written as a “generic" Render Handler you use your own existing Container Element.

To use the standard Container Element, do the following:

  1. Download the master import packet
  2.  Import the supporting custom elements, metadata form and custom render handler
  3. Confirm the Metadata Form is bound to the Render Handler. The import should bind the render handler automatically.

For detailed information on how to import the various components, please see Importing Widgets.

General Widget Documentation

What makes up a Widget?
Common Widget Properties
Importing Widgets
Widget Documentation for Developers
Widget Style Sheets
Author: PaperThin
Version: 1.0
Dependencies:
  • ADF 2.3
  • jQuery 1.9+
  • Bootstrap 3.3
Master Import Packet
File Version: 2022-12-23 01:14 PM

Master Import Packet for Scroll Spy Widget

PaperThin, Inc.

PaperThin, Inc. is a privately held, US-based company since 1993. Our flagship product CommonSpot™ helps organizations create world-class Web experiences. PaperThin's customers span multiple industries, including: government, healthcare, higher education, and association/non-profit sectors.

Contact Us

 617.471.4440
 info@paperthin.com

Learn More

  • Get a Demo
  • Try Now
  • All Features
  • Cloud vs. On-Premises
  • Spotlight Customers
  • Testimonials

CommonSpot is for:

  • Marketers
  • Designers & Developers
  • Administrators
  • Content Owners

Customer Links

  • Contact Support
  • Community Site
  • Professional Services
  • Training
  • Give Feedback

General

  • Contact Us
  • About PaperThin
  • Site Map
  • Career Opportunities
  • Privacy Policy
  • Terms of Use

Copyright © 2025 PaperThin, Inc. / All rights reserved.