すたすた式
QooQ
導入してからかなり時間がたちますが、記事にしていなかったので書いてみました。
一番下のウィジェットを追従させる方法と、サイドバー全体を追従させる方法です。
ウィジェットの追従に関しては、以前に使わせていただいていたテンプレートVaster2に導入した経験があったのでそれをベースにしました。
HTMLを編集します。必ずバックアップを取ってから作業してください。
/* 2カラム設定 */のところにある#sub-contentにdisplay: flex;を追加
#sub-content
display: flex;
#sub-content { margin-top: 30px; width: 316px; flex-shrink: 0; display: flex; /* 追加 */ }
追記：自分の環境では、スマートフォンのときにラベルウィジェットのラベルデザインがおかしくなったので@media (max-width : 768px)の#sub-contentにdisplay: block;を追加しました。
@media (max-width : 768px)
display: block;
#sub-content { @media (max-width : 768px) { #main-inner { display: block; } #main-content { width: 100%; margin-right: 0; } #sub-content { display: block; /* 追加 */ width: 100%; } }
次に、デベロッパーツールなどで追従させたいウィジェットのIDを調べて、cssにposition: sticky;とtop: 0;を追記する。
position: sticky;
top: 0;
または、追従させたいウィジェットが一番最後の要素なので
#sub-content .widget:last-child { position: sticky; top: 0; /* 数字で上部の間隔を調整 */ }
と書いても動きます。
top: 0;のところの数字を増やすと上部の間隔が調整可能です。（15pxとか20pxとか）
サイドバー全体を追従させるにはテンプレートに下記cssを追加します。
#サイドバー { position: sticky; top: 0; }
Vaster2はfloatをつかってレイアウトをしていたのに対して、QooQはdisplay: flex;を採用していたので格段に作業量が少なく済みました。
float
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
コメントなし:
コメントを投稿