人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

追尾サイドバーについての質問です
http://www.hanpendada.com/2015/01/fixed-sidebar.html
上記の記事を参考に追尾サイドバーを導入してみたのですが少し納得しないとこがあり質問させて頂きました。
追尾するは追尾するのですがサイドバーの白縁が消えコンテンツ単体が追尾するようになっています
サイドバーの白縁を維持したまま追尾させたいのでどうか知恵をお貸し下さい

自サイト :http://2chsummarylog.blogspot.jp

html,css :http://www.dotup.org/uploda/www.dotup.org562619.txt.html

追尾させたいコンテンツ
<!-- 固定リンクツール -->
<div id="blz_lock_1566_539">
<script type="text/javascript">
<!--
var blzP='lock',blzU='1566',blzT='539',blzAC='1';
-->
</script>
<script src="//blozoo.net/js/locktool/blogparts.js"></script>
</div>
<!-- https://blozoo.com/ -->

●質問者: otmp123
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● ぽけっとしすてむ
ベストアンサー
.fixed {
 background: #fff;
 padding: 20px;
 font-size: 13px;
 z-index: 80000;
}

.fixedが追加されるタグが「白枠を作っているタグ」の中にある為、中身だけ出てきてしまう事になります。
サイドバーの白枠のような指定を追加すれば解決できるかと思います。

※z-indexは最前面に出したいという事を踏まえて設定してあります。


otmp123さんのコメント
回答ありがとうございます 無事白枠のまま追尾しています 申し訳ありませんがあと一つだけ 追尾時に右斜に若干ずれなくすることはできますでしょうか?

ぽけっとしすてむさんのコメント
>|css| .fixed > div { background: #fff; padding: 24px; /* font-size: 13px; */ z-index: 80000; margin-left: -20px; } ||< 当て方を変えます。 そもそもの話になりますが、fixedを当てるターゲットをサイドバー自身に変更して >|| var nav = $('#HTML4'), offset = nav.offset(); ||< さらに、上手くCSSの指定が上書きされるように記述すれば >|css| .fixed { position: fixed !important; top: 20px; } ||< スマートに解決できるのではないでしょうか。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ