これは、IE を除くすべてのブラウザでうまく機能します。これを修正するにはどうすればよいですか? IE でスクロールすると、非常にぎくしゃくします。
//js
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#scroller').css('top', $(window).scrollTop());
}
});
これは、IE を除くすべてのブラウザでうまく機能します。これを修正するにはどうすればよいですか? IE でスクロールすると、非常にぎくしゃくします。
//js
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#scroller').css('top', $(window).scrollTop());
}
});
これを試してください(フィドル):
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$('#scroller').addClass("top");
}
else {
$('#scroller').removeClass("top");
}
});
そしてCSS:
#scroller {
position: relative;
top: 100px;
width: 500px;
background: #CCC;
height: 100px;
margin: 0 auto;
}
#scroller.top {
position: fixed;
top: 0;
left: 50%;
margin-left: -250px;
}
編集: セット and を に追加し、width
セットmargin
and #scroller
(left: 50%
セットmargin-left: -250px;
幅の半分) を .top クラスに追加しました
あなたもこれを試すことができます(フィドル)
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
//$('#scroller').css('top', $(window).scrollTop());
$('#scroller').css('top', '0px');
$('#scroller').css('position', 'fixed');
}
else
{
$('#scroller').css('top', '100px');
$('#scroller').css('position', 'absolute');
}
}
);