Edit this page

up.viewport [up-anchored=right]
HTML selector

Marks this element as being anchored to the right edge of the screen, typically fixed navigation bars.

Since overlays hide the document scroll bar, elements anchored to the right appear to jump when the dialog opens or closes. Applying this attribute to anchored elements will make Unpoly aware of the issue and adjust the right property accordingly.

You should give this attribute to layout elements with a CSS of right: 0 with position: fixed or position:absolute.

Instead of giving this attribute to any affected element, you can also configure a selector in up.viewport.config.anchoredRightSelectors.

Example

Here is the CSS for a navigation bar that is anchored to the top edge of the screen:

.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

By adding an up-anchored="right" attribute to the element, we can prevent the right edge from jumping when an overlay opens or closes:

<div class="top-nav" up-anchored="right">...</div>