//黄色いお問い合わせボタン
<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>
  • CLOSE
  • お問い合わせ
//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>
PAGE TOP
invewは、特定要素が、画面に存在するときだけ発火という特殊性から、この部分からこの部分まで、という範囲指定が出来ない。
(範囲指定の場合、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
CONTENTS-01
CONTENTS-02
CONTENTS-03
CONTENTS-04
CONTENTS-05
CONTENTS-06
CONTENTS-07
CONTENTS-08