Scrolling Sidebar

The widget creates a sidebar with up to 100 items. Each item can has a heading with a contrasting background, an optional image and data field for date, price etc, text content and an optional CTA style internal link.
As the content is scrolled, the heading for each item stays stuck to the top until the next heading scrolls up.

Reorder Items
Items are added using the EverWeb widget API Asseys List so they can be quickly rearranged by dragging. This makes the widget ideal for latest news items, new products, blog posts etc.
Sticky Headings
The scroll and stick headings are implemented using the relatively new selector "position:sticky".
This allows the effect to use CSS rather than javascript and makes it much more suitable for mobile use.
Scroll Arrows
The optional up/down scroll arrows are created using HTML and the CSS ":before" and ":after" selectors.
CTA Links
The optional links are CTA (Call To Action) style which should be used in place on text hyperlinks if possible.
The links can have a hover color for full site use and can be aligned left, center or right.

Styling Options

The widget can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
There are controls for styling the heading font size, color and background and to show/hide the scroll arrows.
The image padding can be adjusted and there are controls for adjusting the font size, color, data color, background color and the line height.
The CTA links can be styled for color, hover color, background and border width, color and radius.
The container size is adjusted using the drag handles or the Metrics inspector and has options for border width, color and radius and box shadow radius and color.

EverWeb Widgets