Sticky Objects

Sticky Objects Introduction

Some websites have items on the page that stick on screen, and float over the page that scrolls below, often navigation controls, or social network icons. These tend to be stuck to the top edge of the browser window, sometimes to the left or right edge, and can’t be scrolled out of the window. The benefit of sticky objects is that they are always visible. So you can, for example, have direct access to page navigation without having to scroll up the page. WD11P and DPX11 now provides the ability to make any item on the page sticky in this way

Example 1: Sticky top navigation bar and side social buttons

Example 2: Sticky top bar (that changes as you scroll down) and fixed vertical navigation side panel

How to apply

Simply right-click the object and click Web Sticky / Stretchy and check the option 'Sticky'

Sticky object positioning

The positioning of your sticky objects on the browser is dependant on where you position them on the page.

In the image above, the top image is where if you place your sticky object within Xara, it will appear as in the bottom preview.

For sticky objects in the top half of your page, the distance between the object and the top of the page determines the distance from the top of the browser window in the published page. So if you place the object 20px from the top of the page, it will be stuck to the browser window always 20px from the top, as the main page content scrolls below it.

This means that all the items you draw at the top of the page (which is their initial position when you open the browser) and set to sticky, will remain in the same relative positions to each other, but at the top of the browser window.

You can stick items to the bottom edge (e.g. permanent footer panel). If the sticky object is closer to the bottom edge of the page, then it gets stuck to the bottom edge of the browser window instead. So again, placing the sticky object 20px from the bottom of the page will make it stick 20px from the bottom of the browser window.

All sticky objects that you place on the page (or even just partially overlapping the page) will remain in the same horizontal position you place them.

Sticky Object Stacking Order

Sticky items normally float on top of the rest of the page, so would normally be arranged to be at the front of all the page content. If you make items sticky that are behind other items on the page, these will be drawn on top when you export your website.

So if you draw a rectangle, place some items on top of it (like in the examples above), make the rectangle sticky and not the items, these will be covered by the rectangle on the website. So just make sure all items are make sticky and they will retains their relative stacking order.

However you can also have sticky objects behind your page content if you place them on the Pasteboard Background layer.

Stick to Top 

There is now a new 'Stick at top' option (menu: Utilities > Web Sticky/Stretchy) an alternative way of keeping objects such as navigation bars in view. A 'Stick at top' object starts off on the page where you place it, and scrolls with the page just like all your other page content. But instead of scrolling off the top of the window, the object sticks to the top of the browser window and so stays in view. Therefore it's great for navigation bars.

Sticky Objects FAQ

What objects can and can't be made sticky?

All objects can be made sticky, with the exception of objects within groups.

Applying sticky to a text area causes embedded objects to also become sticky but doesnt cause anchored objects to be sticky. Sticky needs to be separately applied to the anchored objects.