追尾サイドバーについての質問です

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2015/10/16 02:50:26
  • 終了:2015/10/20 18:51:53

ベストアンサー

id:psne No.1

ぽけっとしすてむ回答回数476ベストアンサー獲得回数2572015/10/16 03:54:08

.fixed {
  background: #fff;
  padding: 20px;
  font-size: 13px;
  z-index: 80000;
}

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

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

id:otmp123

回答ありがとうございます
無事白枠のまま追尾しています

申し訳ありませんがあと一つだけ
追尾時に右斜に若干ずれなくすることはできますでしょうか?

2015/10/16 06:02:19
id:psne
.fixed > div {
  background: #fff;
  padding: 24px;
  /* font-size: 13px; */
  z-index: 80000;
  margin-left: -20px;
}

当て方を変えます。

そもそもの話になりますが、fixedを当てるターゲットをサイドバー自身に変更して

var nav = $('#HTML4'),
    offset = nav.offset();

さらに、上手くCSSの指定が上書きされるように記述すれば

.fixed {
  position: fixed !important;
  top: 20px;
}

スマートに解決できるのではないでしょうか。

2015/10/16 06:57:12

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません