_activeComponentId = 'demoBookmarkSpy';

BookmarkSpy

Watches a scrollable container and highlights whichever navigation link matches the section currently in view, renders no markup of its own, it just wires up navigation you already have.

Try it

updateURL defaults to true, this demo turns it off, so scrolling here doesn't rewrite this documentation page's own address bar.

Component demos show every property used in the settings panel, even at default values, so you can see exactly what's being configured. Bindary's data binding updates the component live when a setting changes; that mechanism isn't covered here, see Bindary for how it works.

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut diam velit, rutrum at gravida nec, congue vitae justo. Suspendisse a neque id neque rhoncus posuere interdum vel eros.

Section 1.1

Suspendisse tempus, elit ac accumsan euismod, magna libero tincidunt ligula, ut finibus est odio id velit. In commodo tortor non sagittis condimentum.

Section 1.2

Donec convallis, quam vel blandit porta, justo lectus aliquam nisi, eget consectetur ligula dolor ac sapien. Proin tempor nec arcu ac fermentum.

Section 2

Maecenas eleifend aliquam nisi, a dictum felis consequat ac. Integer eget eleifend risus. Duis ac posuere tortor. Nam ornare, enim quis accumsan iaculis.

Section 3

Mauris varius faucibus tellus. Mauris imperdiet arcu ut neque congue, gravida sodales nunc sodales. Nulla ac nulla ac nisi ultrices cursus.

Usage

<div id="myBookmarkSpy" ui-type="BookmarkSpy" ui-scroller="content"></div>
<nav>
    <a href="#section-1">Section 1</a>
    <a href="#section-2">Section 2</a>
</nav>
<div id="content">
    <section id="section-1">...</section>
    <section id="section-2">...</section>
</div>

const bookmarkSpy = $UI.createComponent(componyx.UI.BookmarkSpy, {
    id: 'myBookmarkSpy',
    scroller: 'content',
    containerElement: document.body
});
bookmarkSpy.show();

A link is matched to a section by its href's hash matching that section's id. Nothing further is needed, no ui-item-list, no repeat, the navigation is markup you already have.

What's next

See the BookmarkSpy API reference for the complete list of properties, events and methods, including menuId for highlighting items in a Menu instead of plain links, cssClassParent for also marking a bookmark's parent links as active and tags/offset for controlling exactly what counts as a bookmark.

View and edit mode

Search & Select

Autocomplete Tags

context attribute

value attribute

html attribute

bind attribute

type attribute

attributes attribute

repeat attribute

repeat-item-id attribute

item-id attribute

filter attribute

view-formatter attribute

data-formatter attribute

else-if attribute

else attribute

has-value attribute

includable attribute

include attribute

load attribute

observe attribute

Component Introduction

pre-render attribute

post-render attribute

update-id attribute

keep attribute

view attribute

Node.js Backend

Appskin Appskinevents

Appskin Menuitem

Base Static Item

Base Static Itemlist

Base Webcomponent

Bindary_modules

Bookmarkspy Bookmarkspyevents

Button Buttonevents

Carousel Carouselevents

Colorbutton Colorbuttonevents

Colorpicker Colorpickerevents

Combobox Comboboxevents

Datapager Datapagerevents

Datepicker Datepickerevents

Dialog Dialogevents

Editor Editorevents

Editor Styleitem

Editor_modules Componyx Ui Editor_modules Symbolpicker

Fileupload Fileuploadevents

Form Buildblock

Form Componentsettings

Form Contentfield

Form Datasource

Form Fieldoption

Form Formevents

Form Serverendpoint

Form Spacerfield

Form Validationsettings

Grid Columngroup

Grid Gridevents

Maskedtextbox Maskedtextboxevents

Menu Menuevents

Numericbox Numericboxevents

Panelbar Panelbarevents

Piechart Piechart Segment

Piechart Piechartevents

Piechart Segment

Slider Sliderevents

Tabstrip Tabstripevents

Tabstrip_modules

Timepicker Timepickerevents

Tooltipmanager Trigger

Validator Validatorevents

ClientActivityMonitor

DataContainer<T>

DataContainer<T>

DataContainer<T>

DataResponse<T>

DataResponse<T>

DataResponse<T>

DataUpdateManager

ReusableAttribute

AppSkinAuthenticationMiddleware

AppSkinAuthenticationOptions

AppSkinAuthenticationRequest

AppSkinAuthenticationResponse

AppSkinAuthenticationResponse AuthenticationStateOption

AppSkinAuthenticationResponse FailureReasonOption

AppSkinMenuItem

AppSkinMenuItem MenuSectionOption

AppSkinMenuItem TileSizeOption

AppSkinSearchMiddleware

AppSkinSearchOptions

Base AjaxResult<T>

Base Attributes

Base ItemList<T>

Base NameValuePair

ComboBoxAjaxResult

FilteredColumn FilterOption

GridColumnFilter

Json LenientEnumConverter

Json Utility DefaultSerializer

KeywordIndexData

MenuItem ColumnDirectionOption

MenuItem ExpandDirectionOption

MenuItem TypeOption

ResourceMiddleware

TabStripItem DecorationOption

TagHelpers RegisterTagHelper

TagHelpers RegisterTagHelper ThemeOption

Base JsonDataSettings

Base JsonDataSettings DefaultSerializer

Base LogicRelation<T>

DAL FluentQuery<T>

DAL SqlColumnOrdinalOption

DAL SqlDelimitedIdentifierOption

DAL SqlLimitOption

DAL SqlTopLimitOption

DataAnnotations ForeignKeyAttribute

DataAnnotations ReadOnlyAttribute

DataAnnotations TableAliasAttribute

CaseInsensitiveDictionary<T>

CaseInsensitiveSortedDictionary<T>

Json IJsonSerializer

Json SystemTextJsonSerializer

PluginLoader<T>

Clientactivitymonitor

Dataupdatemanager

License Agreement