スクロールした時の表示・非表示を複数箇所で実現させる

マークアップの記述でfooterの最下部に忍ばせているposition: fixedの要素を、#campaign-1という要素の頭からfooterの頭まで表示させたいです。また下スクロールでも上スクロールでもそれを実現させたいのですが、うまくいきません。
やりたいことを図で表すとこのようになっています。

現状はfooterのトップを境目に表示・非表示となります。しかし、#campaign-1の境目はうまく機能していないようです。また、更新時は非表示の状態ですが、ほんの少しスクロールしただけで#campaign-1のトップとは関係なくすぐ表示されてしまいます。

jqueryで記述したコードはこのようになっています。

jQuery(function(){
            $(window).on('scroll', function(){
                let fxdAria = $('.fxd_aria');
                let oneAria = $('#campaign-1').offset().top; 
                let footer = $('.aco_wrapper').offset().top;
                let scroll = $(window).scrollTop();

　　　　　 if(scroll > oneAria){
                     fxdAria.toggle(true);
                }else{
                     fxdAria.toggle(false);
                }
                if(scroll < footer){
                     fxdAria.toggle(true);
                 }else{
                     fxdAria.toggle(false);
                    }
            });
        });

これ以外に、show()、hide()、fxdAria.css('display','block') などを試してみましたが、状況は同じでした。メソッドの問題ではないのかもしれません。htmlではfxdAriaの要素をfooterの中ではなく外に記述してみましたが、それも動作は変わりませんでした。

以下、wordpressのfooter.phpとscssの記述になります。

footer.php


<footer class="pb-4">
        <div class="text-center mb-5">
            <a href="#" class="col-2 text-white">企業情報</a>
            <a href="#" class="col-3 text-white">個人情報について</a>
            <a href="#" class="col-5 text-white">情報セキュリティーポリシー</a>
        </div>
        <p class="text-center w-100 text-white">Copyright © xxxxxxxxxx All rights reserved.</p>
        <div class="fxd_aria fixed-bottom">
            <div href="header" class="top_btn w-100 text-right">
                <a href="#">
                    <img src="<?php echo get_template_directory_uri(); ?>/images/sp/pagetop_btn_sp.png" 
                    alt="ページトップボタン">
                </a>
            </div>
            <div class="apl_btn text-center">
                <button class="w-100">
                    <a href="#" class="text-center text-white">今すぐ申し込む</a>
                </button>
            </div>
        </div>
    </footer>

mystyle.scss



 .fxd_aria{
            background: transparent;
            border: none;
            display: none;

    
            .top_btn{
                background: transparent;
                padding: 0 2.5rem 1rem 0;

                a{
                    border: none;
                    outline: none;
                    text-decoration: none;
                    color: #fff;

                    img{
                        height: 6rem;
                        width: 6rem;
                    }
                }
               
            } 

            @include mq(sp){
                .top_btn{
                    padding-right: 0 !important;

                    a img{
                        width: 4.5rem;
                        height: 4.5rem;
                    }
                }
            }

            .apl_btn{
                padding: 2.5rem 3rem; 
                background: rgba(0,0,0,0.7);
                
                button{
                    padding: 2.5rem 3rem;
                    background: $acsent_P;
                    border-radius: 4rem;
                    border: none;
                    outline: none;
                    display: block;
                    position: relative;
                    max-width: 80rem;
                    box-shadow: 0 0.3rem 0 0 #6d1fdc;
                    transition: opacity .4s;
                    margin: 0 auto;
                    

                    a{
                        font-weight: 700;
                        letter-spacing: 0.03em;
                        text-decoration: none;
                        font-size: 2.1rem;
                        border-left: none;
                    }
    
                    &::after{
                        content: '\f105';
                        font-family: FontAwesome;
                        position: absolute;
                        right: 5%;
                        top: 30%;
                        color: #fff;
                        font-size: 2.1rem;
                    }
                }

                @include mq(sp){
                    padding: 1.5rem 3rem;

                    button{
                        padding: 1.2rem 1.5rem;

                        &::after{
                            right: 8%;
                            top: 15%;
                        }

                        a{
                            font-size: 1.4rem;
                        }
                    } 
                }
            } 
        }

地味に長い間実現できずにおります。
どうかお力をいただけたら幸いです。