on scroll “sticky-element” will need stick to before “footer-area” not on bottom of page

Question

I have one "sticky-element" div, on page load which I have been set position:fixed with bottom right aligned.

Requirement : on page scroll I would like to set it stick to just before on my "footer-area".

Issue : I have handled successfully css and js part on load, but I am not able to find logic that how can i add another class to my "sticky-element" once "footer-area" will start visible on window.

HTML

<div class="container">
<div class="page-section">
    <p>lots of code and other div nested in this as well</p>
</div>
<div class="sticky-element">
</div>
<div class="footer-area">
</div>
</div>

jquery

$(window).on("load",function(){
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if(){
        $(".sticky-element").addClass("some-class");
    }

    else {
        $(".sticky-element").removeClass("some-class");
    }
});

});

css

.sticky-element { position:fixed; }

.sticky-element.some-class { position:static; }

In above one if() my logic is that I would like to use if "footer-area" is visible on window than only add class will works.

Please suggest if anyone has Simple and short(not too much complex) coding way for this.

Thanks in advance

Answer 1

Try something like that:

     <div class="container">
         <div id='wraper'>
            <div class="page-section">
              <p>lots of code and other div nested in this as well</p>
            </div>
            <div class="sticky-element">
            </div>
         </div>
         <div class="footer-area">
         </div>
     </div>


   $(window).on("load",function(){
    $(window).scroll(function() {    

        var bottomOfWraper = $('#wraper').offset().top + $('#wraper').outerHeight();
        var bottomOfWin = $(window).scrollTop() + $(window).height();

        if( bottomOfWin > bottomOfWraper){
            $(".sticky-element").addClass("some-class");
        }

        else {
            $(".sticky-element").removeClass("some-class");
        }
    });
  });