【サンプル】スクロールを途中で消す

indexに戻る jQueryの基本 jQueryサンプル

【サンプル】スクロールを途中で消す 【サンプル】タグ（文章の）の入れ替え 【サンプル】ループスライダー 【サンプル】カルーセルスライダー

jQueryの基本 jQueryサンプル イメージマップ

スクロールを途中で消す

Jqueryはふわっと表示のjqueryで大丈夫！

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>


【 HTML 】
.main　この間だけ表示
.sub　 非表示


【 JavaScript 】
<script>
$(document).ready(function(){
	var btm = $("#contact-box");
	var main_height = $(".main")[0].clientHeight;

$(window).scroll(function(){
	var scr = $(this).scrollTop();
	var k = 500; // 調整用定数. 0にするとsubが画面上端に達したときに画像非表示
	console.log(scr);
	if(scr>main_height - k){
		btm.addClass("hidden");
	}else{
	btm.removeClass("hidden");
	}
});
});
</script>



【 CSS 】
<style>
.main{height:auto;}
.sub{height: 10vh;}
.hidden{display: none;}
</style>