Stick-at-Top (SaT) has a quirky behaviour: if an object is set to SaT and ‘Stretch-Full-Width’ objects scrolling up the page fly over the
top of SaT objects, whereas the expectation is likely they should fly underneath those SaT objects. The latter would be true for
Sticky objects. This oddity still exits today and becomes more obvious when creating a scrolling desktop NavBar that a designer
wants to stick-at-top. The work-around is simple enough. The designer can create two horizontals bars, both likely the same
height, one has the width set to the page-width and is NOT stretched, the other is set to Stretch-Full-Width; both are set to SaT.
The page-width bar and its SaT components must be set to the Front and the page-bar and components must be in front of the
‘stretched bar’. The reason for the Full-Width bar is to create the impression that this is a single bar that stretches the full width of
a browser.
The NavBar in this example is simply a collection of text columns with links and a MouseOver colour, soft-grouped with both bars
and their components together with a Top-of-Page icon. This keeps the respective bars and components together and enables the
designer to ensure they stay in the correct order, and in front of other content.
Normally text columns would scroll up to the very top of the page (without some padding); while this could be achieved by
grouping the text with a transparent shape to keep its position relative to the bar it sits on, grouping the text and shape converts
the text to an image. When magnified this can cause the text to become blurred.
But by using a negative baseline shift, the text columns can
be positioned to appear vertically aligned with the
corresponding bars, without the need for any grouping.
With this approach, menu text stays as text; there is no need for a NavBar per sa and the design behaves as one might expect.
The dual-bar approach also ensures that any other content that has ‘Stretch-Full-Width’ slides underneath the menu bar.
Full Browser Width
This approach works well across all variants, although for the mobile and tablet, the designer does not require the quirky
workaround to cover where the browser width does not exceed the mobile or tablet page width.
Stick-at-Top (SaT) has a quirky behaviour: if an
object is set to SaT and ‘Stretch-Full-Width’
objects scrolling up the page fly over the top of
SaT objects, whereas the expectation is likely they
should fly underneath those SaT objects. The
latter would be true for Sticky objects. This oddity
still exits today and becomes more obvious when
creating a scrolling desktop NavBar that a
designer wants to stick-at-top. The work-around
is simple enough. The designer can create two
horizontals bars, both likely the same height, one
has the width set to the page-width and is NOT
stretched, the other is set to Stretch-Full-Width;
both are set to SaT. The page-width bar and its
SaT components must be set to the Front and the
page-bar and components must be in front of the
‘stretched bar’. The reason for the Full-Width bar
is to create the impression that this is a single bar
that stretches the full width of a browser.
The NavBar in this example is simply a collection
of text columns with links and a MouseOver
colour, soft-grouped with both bars and their
components together with a Top-of-Page icon.
This keeps the respective bars and components
together and enables the designer to ensure they
stay in the correct order, and in front of other
content.
Normally text columns would scroll up to the very
top of the page (without some padding); while
this could be achieved by grouping the text with a
transparent shape to keep its position relative to
the bar it sits on, grouping the text and shape
converts the text to an image. When magnified
this can cause the text to become blurred.
But by using a negative baseline shift, the text
columns can be positioned to appear vertically
aligned with the corresponding bars, without the
need for any grouping.
With this approach, menu text stays as text; there
is no need for a NavBar per sa and the design
behaves as one might expect.
The dual-bar approach also ensures that any
other content that has ‘Stretch-Full-Width’ slides
underneath the menu bar.
This approach works well across all variants,
although for the mobile and tablet, the designer
does not require the quirky workaround to cover
where the browser width does not exceed the
mobile or tablet page width.
