offset-anchor

Definition

The offset-anchor property is used to specify the position of the anchor point for an element with position: sticky. When an element is position: sticky, it becomes fixed to a certain position on the page when it reaches a certain threshold, and the rest of the content scrolls past it. The anchor point is the point on the element that becomes fixed when it reaches the threshold.

Examples

In this example, the .sticky element is set to position: sticky and has an anchor point at the bottom using offset-anchor: bottom. This means that when the .sticky element reaches the top of the viewport, the bottom of the element will become fixed, and the rest of the element will scroll off the screen as the user scrolls through the content:

<div class="container">
  <div class="sticky">
    This is a sticky element with an anchor point at the bottom.
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu massa vel arcu fringilla sagittis. Nullam tincidunt faucibus neque non pulvinar. Sed ac lacinia lacus. Sed sed purus mi. Donec convallis massa vitae ex pharetra malesuada. Aliquam erat volutpat. Morbi varius ex vitae nunc pellentesque, eget malesuada nisl posuere. Sed vel leo vitae urna faucibus sagittis nec sit amet nulla. Vestibulum posuere rutrum enim, a laoreet leo consequat id. Duis et nisi eu massa euismod facilisis.
  </div>
</div>
.container {
  height: 500px;
  overflow-y: scroll;
}

.sticky {
  position: sticky;
  top: 0;
  height: 100px;
  background-color: #f5f5f5;
  offset-anchor: bottom;
}

.content {
  padding-top: 200px;
}

Values

Best Practices

• Use offset-anchor in conjunction with position: sticky to control the positioning of sticky elements.
• Be mindful of the size and position of the element when setting the anchor point. If the anchor point is set to the bottom or right side of the element, the element may become partially or completely hidden.
• Test your layout on different devices and screen sizes to ensure that the sticky element is positioned correctly and the content is not obscured.

Browser Compatibility