Full Width h2 Heading - Position Not Fixed
Sticky h3 Heading
Fade On Scroll 200px
Sticky h4 Heading
Relative To Browser Left
Fade On Scroll 120px
Sticky Or Not Sticky
This widget creates the various types of HTML heading 1 through 4.
The heading can be made full width if required as demonstrated by the h2 heading above.
Its primary function is to create a styled heading which can disappear on scroll.
To achive this, the heading is fixed via the "Full width" control in the Metrics inspector and can also be fixed relative to the browse left.
Once it is a fixed, the jQuery plugin kicks in and fades out the heading after a predetermined scroll amount.
The h3 heading above has its positon fixed and the h4 heading has its position fixed and relative to the browser left.
It's important to note that a heading without a fixed position can NOT be made to fade on scroll.
Enter the heading text. Use HTML line breaks <br> instead of returns.
Enter the font family name, check the box if it is Google hosted and select a suitable web safe fallback font.
Select the appropriate heading type according to the headings position in the page layout hierarchy.
Set the font size, color, style and weight.
Set the text align and letter spacing if required.
Set the background color and its opacity.
Style the heading container by adding a border width color and radius and/or a box shadow color and radius.
Adjust the Top/Bottom and Left/Right padding if required.
Any of the headings can be created as CTA (Call To Action) style internal hyperlinks by checking the box and choosing the "Link to:" page.
Fade On Scroll
As pointed out above, for fade on scroll to work, the position of the heading has to be either fixed or fixed realtive to the browser left in the Metrics inspector before fade on scroll will work.
After fixing the object, set the amount that the page has to scroll before the fade occurs.
This widget is included in the Full Width widget pack.