[css]divタグをjqueryで動的にclass属性を変更した時の動作について

Question

こんばんは

件名について質問です。

とあるサイト表示で、divタグのclass属性を、画面スクロールの量によって、変更するような画面を作っています。

divタグを例えば

id="nav" class=""

というように記述し、画面スクロール量が上部から20pxいったところでclass属性を固定(class="fixed")にするjqueryを書きました。
fixedはcssを別途記述し、「position: fixed;」という位置固定の指定をしています。

その時の動作として、意図したとおりにdivタグが画面上に固定され、問題なく動作はするのですが、初回表示にdivタグ内の内容物がまったく表示されません。

このような問題はcss側に問題があるのか、js側に問題があるのかかと思いますが、解決のヒントなど、お教えいただけるでしょうか。

よろしくお願い致します。
(回答をいただいた時点でもう少し具体的なコードをお伝えできると思います)

■追記
以下、コードを抜粋しました。
html、css、jsはそれぞれ以下のように書いています。
現象としては、初期表示時に「ここにナビの内容」の文字が見えず、スクロールして初めて内容が見えてくる。という動きになります。

■HTML
<div id="container">
	<div id="main">
	メインの内容
	</div>
	<div id="sidebar">
		<div id="nav">
		ここにナビの内容
		</div>
	</div>
</div>

■css
#container:after {
	display: block;
	clear: both;
	content: "";
}
#sidebar {
	position: relative;
	margin-left: auto;
	width: 237px;
}
#nav {
	width: 237px;
	height: 265px;
	background: #fff;
}
.fixed {
	position: fixed;
	top: 20px;
}

■jquery側のコード
<script type="text/javascript">
jQuery(function($) {
	var nav    = $('#nav'),
	offset = nav.offset();
	$(window).scroll(function () {
		if($(window).scrollTop() > offset.top - 20) {
			nav.addClass('fixed');
		} else {
			nav.removeClass('fixed');
		}
	});
});
</script>

コード

Comments

[kei344]

具体的なコードがあれば回答できる方もおられるかもしれません。

[ebsffzal]

コードの抜粋を追記いたしました。よろしくお願い致します。

Answer 1

どうやら#sidebarに設定しているmargin-left:autoが意図しない形で効いているためのようです。
CSS設定を再考してください。

Comments

[ebsffzal]

yamato_hikawaさま
aKusanoさま

回答ありがとうございました。

その後、ちょこっといじってみたところ、positionとmargin-leftを
調整することで期待どおりの動きになりました。
調整した点は上記の2点で、以下のように記述しました。
```css
#sidebar {
position: fixed;
margin-left: 930px;
width: 237px;
}
```
以上になります。
またの機会がありましたらどうぞよろしくお願い致します。

Answer 2

このような問題はcss側に問題があるのか、js側に問題があるのか

①CSSのみオフにした場合 ②JSのみオフにした場合で#navの内容物がどのように表示されるか
試してみましたか？
①・②どちらか一方だけ#navの内容物が初期状態から表示されるようであれば、
原因がどちらにありそうかの判別はできるかと思います。