UIKit CSS: Insert sticky sidebar between <article>-tags

Question

I would like to solve the following problem:

I got something like

<article class="uk-article">
 <h1 class="uk-article-title">Test</h1>
 <div class="navi uk-panel uk-panel-box navi-sidebar">
  <ul class="navi-list ">
   <li class="navi-list-item"><a href="#" class="navi-link node-name--H1  is-active-link">Test</a></li>
  </ul>
 </div>
 <p>Lorem ipsum dolor sit amet consectetur adipiscing elit, sociosqu etiam vel aenean augue cum diam, dictumst elementum tristique pretium velit felis. Tristique mi sodales morbi cum urna potenti mollis per, sollicitudin nam dignissim fermentum dis id purus, risus congue pretium aenean cras consequat viverra. Vivamus dolor mattis sem neque vel etiam, ridiculus habitant est diam eros lorem, aptent pharetra tempus iaculis consectetur. A ultrices condimentum dictum tempor non fusce, velit habitant nunc lectus phasellus. Urna erat ullamcorper fringilla vestibulum habitant maecenas commodo posuere pellentesque cras, aptent fames etiam pretium et habitasse ante libero duis.</p>
</article>

You can see this in action here:

https://uikitplay.com/plays/FXuH

Now I would like to overwrite the class test and move it to the right side (something like a sticky menu, that does not overlay the content of the article).

Important: The HTML-structure can not change . It has to be done using CSS.

The div should, as I wrote, not overwrite the article and it should only be sticky within the article area. So it should not be shown in the footer or on the navbar.

I illustrated it:

Any idea to get this working?

Answer 1

First, try to control the width of both article and navi. Lets say, add them 90 to 10%. Make navi position absolute - to stand out from layout. Add data-uk-sticky attribute. Remember about !important in navi width, because it will go much larger when sticky is active. Maybe add more height to navi, to make it look like full width column navigation.

I've made fork from your play. Of course, you can solve this problem other way. This is only my proposal. Personally I don't like when !important appears in css:)

https://uikitplay.com/plays/FXuI

EDIT

Sidebar start to enlarge itself a little on sticky, the uk-panel get more padding. You can shorten it a little:

.navi.uk-active .uk-panel-box {
  padding:0;
}