Odo Affix

Makes an element fixed position while its within a container.

Support

IE9+

Dependencies

Odo Scroll Animation, Odo Window Events

Setup

Create an element with an id. Add your element-to-be-affixed and give it a data-anchor attribute which is the same as the id of the anchor you just created.

<div id="example1" style="position: relative;">
  <div data-anchor="example1" class="js-my-sidebar" style="margin-bottom: 10px;">…</div>
  <div class="my-example-content">…</div>
</div>

The affixed-element's container must be positioned. In this example, I have made it position:relative with the style attribute. It cannot be static. If your affix element disappears at the bottom of its container, this is why. The affixed-element does not have to be the direct descendant of the anchor element.

let affix = new OdoAffix(document.querySelector('.js-my-sidebar'));

Setting UI Overlap

You can also set specify the offset from the top of the page by setting uiOverlap method. This is useful when you have other sticky things on the page, like navigation. By default, the offset is zero.

affix.uiOverlap = function () {
  return 50;
};

Margins

To specify the distance from the top and bottom of the element, use margins. This component will read the margins and use those in its calculations. For example, in the above example, the affix-element has a margin-bottom of 10 pixels.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Notifying the instance of changes

Imagine you have a collapsible list in your affix-element. When toggled, it affects the height of your affix-element, and the instance needs to know about it.

// Notify the instance that the height changed.
affix2.update();

If you have modified something which changes the layout of the page, like inserting content above any affix instance, you will need to notify all the instances that the height of the document changed. Using the static update method is more performant that updating each instance individually.

// Notify the class that page layout changed.
OdoAffix.update();

OdoAffix automatically listens load events from images on the page and checks if the document's height has changed. To avoid your page jumping when images load, place them inside an element which maintains its aspect ratio, like these colored blocks.

Custom Scrollbars

You may want to add a custom scrollbar to the affixed element because on macOS, they disappear after you finish scrolling. The user may not realize there is more content. On this demo page, I've added the following CSS:

.odo-affix--scrollbars::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.odo-affix--scrollbars::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 0 1px rgba(255,255,255,.5);
}

Lorem
ipsum
dolor
sit
amet
consectetur
adipisicing
elit
sed
do
eiusmod
tempor
incididunt
ut
labore
et
dolore
magna
aliqua
Ut
enim
ad
minim
veniam
quis
nostrud
exercitation
ullamco
laboris
nisi
ut
aliquip
ex
ea
commodo
consequat.
Duis
aute
irure
dolor
in
reprehenderit
in
voluptate
velit
esse
cillum
dolore
eu
fugiat
nulla
pariatur
Excepteur
sint