ページにいくつかの画像を追加してフェードさせましたが、トランジション間にジャンプがあります。大変助かりました。
追加すると：
position: absolute;に#carousel、画像が左にフロートし、ページ本体が上に移動し、コンテンツが非表示になります。position: absolute;に.images {}、ページ本体が上に移動し、コンテンツが非表示になります。position: absolute;ジャンプする#carouselと.images {}消えますが、画像は左に浮きますが、ページ本体は上に移動し、コンテンツは見えなくなります。
ありがとう
JS
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var showing_default = true;
var did_scroll = false;
$(window).on("scroll", function (e)
{
did_scroll = true;
});
window.setInterval(function ()
{
if (did_scroll)
{
did_scroll = false;
if (showing_default && $(document).scrollTop() >= 100)
{
showing_default = false;
$("#header_container").css('position', 'fixed');
$("#default").stop().hide();
$("#sticky").fadeIn(500);
}
else if (! showing_default && $(document).scrollTop() < 100)
{
showing_default = true;
$("#sticky").stop().hide();
$("#default").fadeIn(500);
$("#header_container").css('position', 'fixed');
}
}
}, 250);
});
$(document).ready(function()
{
var timeout_id;
var slide_image = function(step)
{
if (step == undefined) step = 1;
clearTimeout(timeout_id);
var indx = $('.image:visible').index('.image');
if (step != 0)
{
$('.image:visible').fadeOut();
}
indx = indx + step;
if (indx >= $('.image').length)
{
indx = 0;
}
else if (indx < 0)
{
indx = $('.image').length - 1;
}
if (step != 0)
{
$('.image:eq(' + indx + ')').fadeIn();
}
timeout_id = setTimeout(slide_image, 1000);
};
slide_image(0);
});
</script>
CSS
<style type="text/css">
/* --- COMMON ---------------------------------------------- */
*
{
margin: 0px;
padding: 0px;
}
/* --- HEADER ---------------------------------------------- */
#header_container
{
display: block;
z-index: 100;
position: fixed;
top: 0px;
width: 100%;
background: #EEEEEE;
-moz-box-shadow: 0 -2px 5px 5px #B8B8B8;
-webkit-box-shadow: 0 -2px 5px 5px #B8B8B8;
box-shadow: 0 -2px 5px 5px #B8B8B8;
}
#default
{
display: block;
margin: auto;
width: 900px;
height: 100px;
}
#sticky
{
display: none;
margin: auto;
width: 900px;
height: 50px;
}
/* --- CAROUSEL -------------------------------------------- */
#carousel_container
{
display: block;
margin-top: 105px;
width: 100%;
background: #FFFFFF;
}
#carousel
{
display: block;
margin: auto;
width: 900px;
}
.image
{
display: none;
width: 900px;
height: 400px;
}
.first
{
display: block;
}
/* --- BODY ------------------------------------------------ */
#body_container
{
display: block;
background: #EEEEEE;
}
#body
{
display: block;
margin: auto;
width: 900px;
}
/* --- FOOTER ---------------------------------------------- */
#footer_container
{
display: block;
background: #DBDBDB;
}
#footer
{
display: block;
margin: auto;
width: 900px;
}
</style>
HTML
デフォルトヘッダー スティッキーヘッダー <div id="carousel_container">
<div id="carousel">
<div class="image first"><img src="images/1.jpg" width="900px" height="400px" alt="" /></div>
<div class="image"><img src="images/2.jpg" width="900px" height="400px" alt="" /></div>
<div class="image"><img src="images/3.jpg" width="900px" height="400px" alt="" /></div>
<div class="image"><img src="images/4.jpg" width="900px" height="400px" alt="" /></div>
<div class="image"><img src="images/5.jpg" width="900px" height="400px" alt="" /></div>
</div>
</div>
<div id="body_container">
<div id="body">
TOP<br /><br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br />BODY<br /><br />BOTTOM
</div>
</div>
<div id="footer_container">
<div id="footer">FOOTER</div>
</div>