Simplicityを少し改造してみた 番外編3-2-3 先日のサイドバー追従部分修正案のfix

先日投稿した追従スクロール案で、貼り付け位置がスクリプト内のスイッチで上下どちらにするか選べるというような事を書きました。その内のトップ貼り付けの部分が、なんかいらん処理してたので単純に書きなおしました。
いわゆる従来のSimplicityのスクロール追従と同じ動作をします。

Simplicityを少し改造してみた 番外編3-2-2 サイドバー追従部分の修正案とbox-sizingによる要素のサイズについて
前にスクロールの追従でクラウドさんを導入した時に動作しなくなったと言う事を書きました。何かしら競合しているのかなと思ったら、そういうのではな...

変更部分

先日のスクリプト27行目のswitch内、case 0の部分を以下のように修正

ハイライト部分の最後にある +60 はマージンです。

再度書いておきますが、今回投稿したサイドバーのスクリプトは、サイドバーのスクロールに追従するエリアだけを操作するものです。このスクリプトを適用するためには、親テーマのjavascript.jsの該当部分をコメントアウトする必要があります。
それに伴ってメインの部分が広くなったり、またメインが広くなるとサイドバーが下に回りこむことがありますが、その時は子テーマ、style.css等に

を追加することでオリジナルのサイズになり、サイドバーが回りこんでいた場合は元に戻ると思います。

ちなみに、貼り付け位置を画面上部、画面下部と選べるようになりますが、選択せず最初からどちらかだけしか利用しない場合は、case 0がトップ寄せ、case 1がボトム寄せなので、それぞれの中身の

をコピーして、switch(selectSwitch){ } 全部と、var selectSwitch = 0; を削除し、switch(selectSwitch)があった部分に先ほどのコピーを貼り付けたらトップ寄せ、ボトム寄せどちらかで動作するようになります。

トップ寄せのみの例

こんな感じです。


2014/11/26追記

実はこのスクリプトを少し改造すると、例えばスクロールダウンの時は画面上部に追従領域をくっつけて、フッタまで行った後、今度スクロールアップをする時には画面下部にくっつけるということも可能かと思います。その需要があるかどうかは別としてですけども。

仕組みとしては、例えば画面下部まで行った時、何かしら識別するcssのclassをjQueryのaddClassで付加して、それが付いている間は画面下部にくっつく。
元の場所に来たら今度はさっきつけたclassをremoveClassで取り除くと言うような処理で行けるのではないかと思います。

そもそも、追従するとなると同じものをずっと表示しっぱなしになるので、それが良いのかどうかはいろいろ考えさせられる所。メインの記事に一定の長さがあればと言う前提があるなら、スクロールのポイントポイントで何かしらを順々に表示させていくという方が良いのかも知れないと思ったりもします。

スポンサーリンク

シェアする

フォローする