Intro
In this demo of vue-affix, I'll demonstrate how you can implement both the standard affix and the scroll affix that this component provides. I'll also use vue-scrollactive, which is another vue component made by me, to highlight the sidebar menu items as you scroll.
Standard Affix
To the left side, is a standard affix being used in a sidebar. That is probably the case where it will be mostly used, and it's ridiculously easy to implement. You see that the sidebar is simply moving relatively to this content section, when you scroll past the section, the sidebar will be affixed, when it reaches the end of the section, it will stay still, and this relative section is all you need to set basically.
One thing to be aware of is that you'll probably want to set a width value to the affixed element, because when it receives the fixed position, it will lose its container width since its container now will be the window. If you don't set one, it will probably break depending on its content and your style.
Scroll Affix
To the right side, is the scroll affix option being used in an aside div. The scroll affix works almost like the standard affix, but it will always be taller than the viewport height, that way if you scroll to the bottom, instead of being affixed to the top of the screen like the standard affix, you will be able to scroll until you reach the end of the scroll affix, then it will be fixed to the bottom. The same happens when you scroll up.
Remember that you need to set the scroll-affix prop to true for this behavior, otherwise it will always stay fixed to the top, and if it is taller than the viewport height, you'll only be able to see its end when it reaches the end of the relative section.
Markup Text 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis repellendus, omnis quidem ad dolorem aliquid. Fugit dolorem dolor ea odit omnis deleniti rerum vel, deserunt et, eius labore placeat rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quis in voluptatem optio labore exercitationem ab porro unde dolorum, distinctio itaque doloribus quas maxime? Dolor, assumenda veritatis reiciendis fuga perspiciatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse hic neque nesciunt incidunt nemo fugit dolorum inventore nam illo tempora voluptate architecto, aspernatur ducimus, iusto doloribus quos doloremque. Beatae, deserunt.
Markup Text 2
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis repellendus, omnis quidem ad dolorem aliquid. Fugit dolorem dolor ea odit omnis deleniti rerum vel, deserunt et, eius labore placeat rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quis in voluptatem optio labore exercitationem ab porro unde dolorum, distinctio itaque doloribus quas maxime? Dolor, assumenda veritatis reiciendis fuga perspiciatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse hic neque nesciunt incidunt nemo fugit dolorum inventore nam illo tempora voluptate architecto, aspernatur ducimus, iusto doloribus quos doloremque. Beatae, deserunt.
Markup Text 3
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis repellendus, omnis quidem ad dolorem aliquid. Fugit dolorem dolor ea odit omnis deleniti rerum vel, deserunt et, eius labore placeat rem.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quis in voluptatem optio labore exercitationem ab porro unde dolorum, distinctio itaque doloribus quas maxime? Dolor, assumenda veritatis reiciendis fuga perspiciatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse hic neque nesciunt incidunt nemo fugit dolorum inventore nam illo tempora voluptate architecto, aspernatur ducimus, iusto doloribus quos doloremque. Beatae, deserunt.