//黄色いお問い合わせボタン
<script>
$(window).scroll(function(){
var window_top = $(window).scrollTop();
var block_start = $('#block_01').offset().top;
var block_end = $('#block_06').offset().top;
if(window_top > block_start) {
$('#yellow_btn').addClass('fade_in_btn');
} else {
$('#yellow_btn').removeClass('fade_in_btn');
}
if(window_top > block_end) {
$('#yellow_btn').removeClass('fade_in_btn');
} else {
}
});
</script>
//TOP PAGEボタン
<script>
$(window).scroll(function(){
$('#green_btn').toggleClass('fixed_top_btn', $(this).scrollTop() > 50);
});
</script>
または
<script>
$(window).scroll(function(){
if($(this).scrollTop() > 200){
$('#green_btn').addClass('fade_in_btn');
}else{
$('#green_btn').removeClass('fade_in_btn');
}
});
</script>
invewは、特定要素が、画面に存在するときだけ発火という特殊性から、この部分からこの部分まで、という範囲指定が出来ない。
(範囲指定の場合、inview用に大外を括るか、#mainなどを指定する必要がある。)
しかし、その特性から、このblockが現れたら即class付与というのが出来るので(blockが外れるとclassも外れるが).offset().top;よりピンポイントでの位置指定が可能。
.offset().top;は、その要素がwindowtopに来たときに発火なので、特定の要素が現れたら、という用途にはあまり向かない。
今回は、スマホ時に、block07が現れたら、即アイコンを消す、というのをやっているが、.offset().top;だとそれは出来ない。
(範囲指定の場合、inview用に大外を括るか、#mainなどを指定する必要がある。)
しかし、その特性から、このblockが現れたら即class付与というのが出来るので(blockが外れるとclassも外れるが).offset().top;よりピンポイントでの位置指定が可能。
.offset().top;は、その要素がwindowtopに来たときに発火なので、特定の要素が現れたら、という用途にはあまり向かない。
今回は、スマホ時に、block07が現れたら、即アイコンを消す、というのをやっているが、.offset().top;だとそれは出来ない。
block_01~block_06をjs上で「範囲指定」し、offset
block_01がwindow上限に達したら、fadein、block_06がwindow上限に達したらfadeout
block_01がwindow上限に達したら、fadein、block_06がwindow上限に達したらfadeout
CONTENTS-01
CONTENTS-02
CONTENTS-03
CONTENTS-04
CONTENTS-05
CONTENTS-06
CONTENTS-07
CONTENTS-08

