The latest value to be added to the CSS position property is "sticky. It allows elements to stick when the scroll reaches a certain point. An element with position: sticky will behave like a relatively-positioned element until it reaches a specified point and then starts behaving like a statically-positioned element.
In this example the sticky value is applied to the header of each article.
The container has a fixed height which can be set in pixels or in viewport units. A value of 100vh will set it to fill the height of the browser/device window.
The container is centered with a maximum width settings and the overflow set to scroll on the Y-axis.
Each it in the scroller is an HTML5 <article> element with a header, optional image, a heading, text and an optional link.
The link can open internal or external pages and has a new window option.
The optional footer has a scroll to the top function with the scroll time set in milliseconds,
The scrollbar can be styled for webkit browsers(Chrome & Safari) with controls for width, color, track color and border radius.
The latest value to be added to the CSS position property is "sticky. It allows elements to stick when the scroll reaches a certain point. An element with position: sticky will behave like a relatively-positioned element until it reaches a specified point and then starts behaving like a statically-positioned element.
In this example the sticky value is applied to the header of each article.
The container has a fixed height which can be set in pixels or in viewport units. A value of 100vh will set it to fill the height of the browser/device window.
The container is centered with a maximum width settings and the overflow set to scroll on the Y-axis.e
The optional header icons are created by inserting SVG code. The icon size and color can be adjusted and any one for more icons can be rotated to change its direction from 0° through 45°, 90°, 135° to 180° SVG icons are much more efficient than font icons like Font Awesome and much better than using PNG images since the size and color can be changed easily and without losing quality.
SVG InfoThe widget pack contains a folder with 100s of SVG icon. It's just a question of double clicking the icon to open it in TextEdit, copy the code and paste it into the widget settings. Follow the info link to find out how to use TextEdit on your Mac as a basic code editor to create HTML files.
Mac TextEditEach item in the scroller is an HTML5 <article> element with a header, optional image, a heading, text and an optional link.
The link can open internal or external pages and has a new window option.
The main container has an optional footer with a centered chevron up icon which will smooth scroll back to the top when clicked or tapped. The scroll time is adjustable and set in milliseconds..
Scrolling Info
