スクロールでフッターが半透明になる機能でiOSのsafariのみ挙動がおかしい

以前、こちらで質問して教えて頂いた続きになります。「スクロールでフッターが半透明になるジャバスクリプト」ですが、どうも1点だけ不具合のようなものが見つかりました。

↓以前の質問
https://teratail.com/questions/175393?nli=5c6ddbfd-62d4-4da7-9883-40560a28010e

不具合
・iPhoneSEのSafariで動作確認すると、「画面下部に到達したときに、透明が解除されない、もう一度、指で↓にスクロールすると、透明が解除されるという」不具合です。iPhoneのChromeやPCのSafari、Chromeは問題ありません。

ここまできたら、どうにか解決したいと思い、お分かりの方がいましたら教えていただけないでしょうか？

<footer>
<ul id="footer-scroll">
<li ><img src="/wp-content/uploads/img/start.png" alt="start"></li>
<li ><img src="/wp-content/uploads/img/sns.png" alt="sns"></li>
<li><a href='#'>Favorites</a></li>
</ul>
</footer>

#footer-scroll{
    display:flex;
    justify-content:left;
	position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 99;
}

const basic_opc = '1';
const scroll_opc = '0.2';
$(function() {
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();

        var doch = $(document).innerHeight();
        var winh = $(window).innerHeight(); 
        var bottom = doch - winh;
        if (bottom <= $(window).scrollTop()) 
            footer_animate(false);
        else if(scrollTop != 0)
            footer_animate(true);
        else
            footer_animate(false);
    });

    $('#footer-scroll').hover(
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                footer_animate(false);
            }
        },
        function (e) {
            var scrollTop = $(window).scrollTop();
            if(scrollTop != 0){
                footer_animate(true);
            }
        }
    );
});

function footer_animate(scroll){
    let opc = basic_opc;
    if(scroll)
        opc = scroll_opc;

    $('#footer-scroll').stop().animate({'opacity':opc},400);
}

m.ts10806

2019/02/21 04:57

細かくて申し訳ないですが、タイトルが全く同じ（またはナンバリング）はよろしくないです。もう少し起きている問題に寄せた内容にしてもらえると、後から見たときにタイトルだけで何があったか分かるので。

m.ts10806

2019/02/21 05:00

あと、前の質問の回答で、「bottomの判定を最底辺より少し上に指定してみてください。」というコメントをしましたが試してみました？

退会済みユーザー

2019/02/21 05:14

タイトルの件、ありがとうございます。先日はお世話になりました。 bottomの判定の件ですが、恥かしながら、具体的なコード修正が分からず... 教えていただけないでしょうか？確認してみます。

m.ts10806

2019/02/21 05:20

うーん。ナンバリングと変わらないような・・・例えば：スクロールでフッターが半透明になる機能でiOSのsafariのみ挙動がおかしい ----------------------- またまた細かくて申し訳ないですが、以前の質問との関連性があるなら、リンクを貼っておいてもらえると、他の回答者にも関連性が伝わるので、追記願います。

m.ts10806

2019/02/21 05:21

あと、そもそもPCのChromeで確認しているのですが、半透明にならなくなっているような・・？

m.ts10806

2019/02/21 05:27

↑すみません。こちらのHTML構築ミスでした。 DOCTYPE宣言ないと正確に幅とれなくなってたみたいです。

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

回答1件

ベストアンサー

基本的な考え方：
bottomから任意の高さを引くことで最底辺の判断を早めにします。

※ロード時も、例えばブラウザ更新ボタンとかでも判断する必要があるかと思うので、
そのあたり追加して微調整してみました。

js
1const basic_opc = '1';
2const scroll_opc = '0.2';
3const bottom_check_height = 80;        
4$(window).on("load",function(){
5    check_scroll();
6});
7$(function() {
8    $(window).on("scroll",function(){
9        check_scroll();
10    });
11
12    $('#footer-scroll').hover(
13        function (e) {
14            const scrollTop = $(window).scrollTop();
15            if(scrollTop != 0){
16                footer_animate(false);
17            }
18        },
19        function (e) {
20            const scrollTop = $(window).scrollTop();
21            if(scrollTop != 0){
22                footer_animate(true);
23            }
24        }
25    );
26});
27function check_scroll(){
28    const scrollTop = $(window).scrollTop();
29    const doch = $(document).innerHeight();
30    const winh = $(window).innerHeight(); 
31    const bottom = doch - winh - bottom_check_height;
32    if (bottom <= $(window).scrollTop()) 
33        footer_animate(false);
34    else if(scrollTop != 0)
35        footer_animate(true);
36    else
37        footer_animate(false);
38
39}
40    
41function footer_animate(scroll){
42    let opc = basic_opc;
43    if(scroll)
44        opc = scroll_opc;
45
46    $('#footer-scroll').stop().animate({'opacity':opc},400);
47}