Affix sidebar right goes to top?

Question

I am making a sidebar for my website and want to use Affix for this. The problem is that when i scroll down and it activates the sidebar fixed to top goes, and doesn't stay on his position.

This is my sidebar :

<aside class="aside-affix" data-spy="affix" data-offset-top="120" id="affix">
    <p>Dit is een pagina met alle projecten. Deze tekst verschijnt in de sidebar aan de rechterkant.</p>
    <p>Donec at elementum odio. Vestibulum eleifend turpis diam. Phasellus id ante pharetra, cursus purus venenatis, tempus lacus. Curabitur a eleifend lorem. Pellentesque erat justo, ultrices quis mi id, feugiat imperdiet sapien. Ut aliquet orci urna, convallis fringilla risus pharetra ut.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc et congue velit. Vivamus eget lectus arcu. Donec eu porttitor erat. Suspendisse potenti. Vestibulum dignissim leo luctus nibh egestas, nec blandit tortor feugiat. Praesent at ornare velit. Aliquam gravida metus velit, in pellentesque mi iaculis sed. Ut rutrum semper elementum.</p>
</aside>

Nevermind this, i got the top thing fixed, now i got the problem that it goes underneath my footer. i want it to stop at 300px before footer. how to do that? — Wessel Visser, Feb 10 '15 at 15:57
What did you try to solve your problem? Googled anything? What did you search for and what did you find? — Palec, Feb 10 '15 at 21:54

score 0 · Accepted Answer · answered Feb 10 '15 at 16:36

Based on your comment it looks like you've solved part of your issue and are now trying to get the bottom position relative to the footer figured out. Bootstrap's affix plugin toggles the classes .affix-top, .affix and .affix-bottom (you provide CSS for each class scenario). To get the .affix-bottom scenario working right you'll need to set the appropriate bottom offset config on the element using the data-offset-bottom="" attribute since you went the attribute route for initialization.

<aside class="aside-affix" data-spy="affix" data-offset-top="120" data-offset-bottom="600" id="affix">

In your case you'll want the value of that attribute to be the height of your footer + the 300px clearance your looking for between the footer and your affixed element. Hope this helps.

Affix sidebar right goes to top?

1 Answers1