面白かったので、又、jQueryを追加してみました。
一番下まで行くと横からスライドしてくるコンテンツ
設置箇所はトップページのみ。
説明しているサイト
http://www.webopixel.net/javascript/538.html
ソース(jQuery)
jquery-1.7.1.js
<script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script>
最新版の呼び出し↓
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
要素をスライドさせる(無くても可能)↓
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var winWidth = $('body').outerWidth(true);
var lower = $('#lower');
var slide = $('#slide');
//画面下位置を取得
var bottomPos = $(document).height() - $(window).height() -300;
var showFlug = false;
//slideを画面右外へ配置
$('#slide').css('margin-left', winWidth+'px');
$(window).scroll(function () {
if ($(this).scrollTop() >= bottomPos) {
if (showFlug == false) {
showFlug = true;
slide.stop().animate({'marginLeft' : '0px'}, 200);/*多分speed*/
}
} else {
if (showFlug) {
showFlug = false;
slide.stop().animate({'marginLeft' : winWidth+'px'}, 200);/*多分speed*/
}
}
});
//閉じるボタン
$('#close').click(function(){
lower.hide();
});
//ウィンドウリサイズしたらwidth変更
$(window).resize(function(){
winWidth = $('body').outerWidth(true);
bottomPos = $(document).height() - $(window).height() - 300;
});
});
</script>