Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
サイドバーに現在位置を表示して追尾する目次【レスポンシブ対応などテスト版】 http://twilyze.hatenablog.jp/entry/hatena-blog-custom4

使い方(簡易)

  1. sidebar_toc.htmlをデザイン設定の[カスタマイズ]-[サイドバー]-[モジュールを追加]-[HTML]に貼り付ける
  2. sidebar_toc_footer_minify.htmlをデザイン設定の[カスタマイズ]-[フッタ]に追加する
  3. sidebar_toc.cssをデザイン設定の[カスタマイズ]-[デザインCSS]に追加する
  • 必要ならフッタの設定部分を好きなように変える
  • 必要ならCSSもテーマに合わせてそれっぽくする

要望・バグ報告

Googleフォーム

主な変更点(現状)

まだ決定してないところが多いのでそのつもりで

追加

  • ウィンドウサイズ変更に対応
  • 記事ページ以外でもページ内の記事一覧を表示
  • ウィンドウの縦幅よりも大きくなったらスクロールバーを表示する
  • モジュールタイトルを記事タイトルにする機能追加
  • モジュールタイトルをトップへのリンクに
  • 横スクロールにくっついてこないように
  • モジュールを最後以外にセットした時の対応
  • 設定変更しやすいように上の方にまとめた
  • その他色々

変更

  • スクリプト記述場所をフッターに変更
  • スクリプトを開始するタイミングをDOMContentLoadedに変更
  • jQueryを使わなくても動くように書き換え
  • CSS用のID,クラス名を変更
  • その他色々

修正

  • タッチデバイスでのずれに対応(拡大時の表示位置の調整はしていない)
    • タッチデバイスではposition:sticky;を使うためにサイドバーの高さを変更している
  • その他色々

既知の不具合

TODO

  • 各公式テーマ用の簡易なCSSを用意
  • ブログを書く
/*-------------*/
/* 追尾する目次 */
/*-------------*/
#stoc-module {
backface-visibility: hidden;
}
#stoc-module.tracking {
margin-bottom: 0;
/*padding-bottom: 0;*/
/*border-bottom: 0;*/
}
#stoc-module.fixed {
position: fixed;
}
#stoc-module.absolute {
position: absolute;
}
#stoc-module.sticky {
position: -webkit-sticky;
position: sticky;
}
#stoc-module.fade-in {
animation: fadeIn 300ms;
}
@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}
#stoc {
overflow-y: auto;
/* Shadows */
background:
radial-gradient(farthest-side at top, rgba(0,0,0,.16), transparent) top / 100% 14px,
radial-gradient(farthest-side at bottom, rgba(0,0,0,.16), transparent) bottom / 100% 14px;
background-repeat: no-repeat;
background-attachment: scroll;
}
#stoc ol {
margin: 0;
padding: 0 0 0 12px;
list-style-type: none;
}
#stoc > ol {
padding-left: 0;
/* Shadow covers */
background:
linear-gradient(#fff 30%, transparent) top / 100% 40px,
linear-gradient(transparent, #fff 70%) bottom / 100% 40px;
background-repeat: no-repeat;
background-attachment: local;
}
#stoc a {
padding: 2px 2px 2px 6px;
display: block;
text-decoration: none;
/*transition-duration: 0s;*/
}
#stoc:not(.touch) a:hover {
background-color: rgba(0,0,0,.07);
text-decoration: underline;
/*border-bottom: 0;*/
}
#stoc .active {
background-color: rgba(0,0,0,.07);
}
#stoc::-webkit-scrollbar {
width: 8px;
background: #ececec;
}
#stoc::-webkit-scrollbar-button {
display: none;
}
#stoc::-webkit-scrollbar-thumb {
background: #b1b1b1;
}
/*
#bottom-editarea {
display: none;
}
*/
<!-- 追尾する目次 -->
<nav id='stoc'></nav>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment