csslayout/contents/fixed-at-side.md

layout, title, description, keywords

layout	title	description	keywords
layouts/post.njk	Fixed at side	Fix an element at the middle of side with CSS	css fixed

HTML

<!-- Fixed at the middle of left side -->
<div class="fixed-at-side fixed-at-side--l">
    ...
</div>

<!-- Fixed at the middle of right side -->
<div class="fixed-at-side fixed-at-side--r">
    ...
</div>

CSS

.fixed-at-side {
    position: fixed;
    top: 50%;
    transform: translate(0px, -50%);
}
.fixed-at-side--l {
    left: 0;
}
.fixed-at-side--r {
    right: 0;
}

{% demo %} {% include "patterns/fixed-at-side.njk" %} {% enddemo %}