javascript 追従バナーのfadeIn,fadeOutについて

前提・実現したいこと

モバイル端末でページ下部に追従バナーを設置したいです。
ヘッダーの高さを超えたら追従バナーが出現、その後特定の要素の高さに達したらfadeOutしたいのですがうまく行かずに転んでおります...

該当のソースコード

javascript
1
2  var fixedStart = $(".global_header").height();
3  var followFixed = $(".follow");
4　var fixedEnd = $('#end').offset().top;
5
6  $(this).scroll(function() {
7    if($(this).scrollTop() > fixedStart) {
8      followFixed.fadeIn(500);
9   }else {
10      followFixed.fadeOut(500);
11    }
12  });

試したこと

上記コードにてヘッダーの高さをスクロールした時点でfadeの切り替えはできましたがその後スクロールを進めていき#endの要素に達した段階で再度fadeを切り替えたいです。

行動規範の内容に同意します

回答1件

ベストアンサー

こちらの記事は参考になりますか？
http://www.gipservice.com/blog/0930/

var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();

if (scroll > imgPos - windowHeight + windowHeight/5){
   $(this).addClass("fade_on");
} else {
   $(this).removeClass("fade_on");
}

投稿2019/12/19 13:21