のUIKit CSS：私は次のような問題を解決したいと思います<article> - タグ

Question

の間に挿入スティッキーサイドバー：

https://uikitplay.com/plays/FXuHを：

私はあなたがここでこの動作を確認することができます

<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> 

のようなものを得ました

ここではclass testを上書きして、右側に移動したいと思います（スティッキメニューのようなものです記事の内容にオーバーレイしない）。

重要：HTML構造はを変更できません。それはCSSを使用して行う必要があります。

私が書いたように、divは記事を上書きしてはならず、記事領域内ではスティッキーでなければなりません。したがって、フッターやナビゲーションバーには表示しないでください。

私はそれを示す：

任意のアイデアを、この作業を取得しますか？

Answer 1

まず、記事とナビの幅を調整しようとします。 90〜10％を追加しましょう。ナビの位置を絶対的にする - レイアウトから目立つようにする。 data-uk-sticky属性を追加します。スティッキーがアクティブになっているときにはるかに大きくなるので、ナビ幅で重要なことを覚えておいてください。おそらくナビに高さを加えて、フル幅の列ナビゲーションのように見せてくれるかもしれません。

私はあなたの遊びからフォークを作りました。もちろん、あなたはこの問題を別の方法で解決することができます。これは私の提案です。

サイドバーは、英国・パネルはより多くのパディングを取得し、粘着性に自分自身を少し拡大し始めたときに！CSSで重要であると思わ:)

https://uikitplay.com/plays/FXuI

EDIT個人的に私は好きではありません。少し短くすることができます：

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