Stop sticky Box on Wrapper bottom border

I have a sticky box on my page which have to stops on bottom border of wrapper but I don’t know how to do it. I think its very basic and simple but I just don’t know how to.

jQuery(document).ready(function($) {
    var stickyHeaderTop = $('.sticky_div').offset().top;
    $(window).scroll(function(){ /*header-menu-wrap*/
        if( $(window).scrollTop() > stickyHeaderTop ) {
        $('.woocommerce-tabs').addClass("sticky");
        } else {
        $('.woocommerce-tabs').removeClass("sticky");
        }
    });  });

.sticky_div {
    float: left;
    width: 250px;
    height: 150px;
} 

.sticky {
    position: fixed;
    top: 0;
}

.woocommerce-tabs {
    max-width: 250px;
    min-height: 150px;
    background-color: #ccc;
    float: left;
    padding: 25px;
    box-sizing: border-box;
}

.container {height:700px; border-bottom:1px solid #000;}

.footer {height:700px; background:#ffe000;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br>
  <div class="sticky_div">
   <div class="woocommerce-tabs">
   Content
   </div>
  </div>

</div>
<div class="footer"></div>

Answer

Try this for sticky footer.

.footer{
    background-color: green;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
}

<div class="footer">Stays at the page bottom</div>

Updated Answer #1

<style type="text/css">
        .sticky_div {
            width: 250px;
            height: 150px;
        } 

        .sticky {
            position: fixed;
            top: 0;
            width: 250px;
            height: 150px;
            }

        .woocommerce-tabs {
            max-width: 250px;
            min-height: 150px;
            background-color: #ccc;
            padding: 25px;
            box-sizing: border-box;
        }

        .container {
            height:700px; 
            border-bottom:1px solid #000;
        }

        .footer {
            height:700px; 
            background:#ffe000;
        }
    </style>

<script type="text/javascript">
$(document).ready(function($) {
    $(window).scroll(function(){ 
        var stickyHeaderTop = $('.sticky_div').offset().top;
        var footer_offset = $(".footer").offset().top;
        var woocommerce_tabs = $(".woocommerce-tabs").offset().top;
        var woocommerce_element_height = 150; // this height is set in css property
        var woocommerce_calc_height = woocommerce_tabs + woocommerce_element_height;

        if( $(window).scrollTop() > stickyHeaderTop ) {
            $('.woocommerce-tabs').addClass("sticky");
        } else {
            $('.woocommerce-tabs').removeClass("sticky");
        }

        if(woocommerce_calc_height >= footer_offset){
            $(window).scrollTop(footer_offset-woocommerce_element_height);
        }

    });  
});

</script>

Updated Answer #2 i’m posting the code here because it will be easy to read. This works.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .sticky_div {

        } 

        .sticky {
            position: fixed;
            top: 0;
            }

        .woocommerce-tabs {
            width: 250px;
            height: 150px;
            background-color: #ccc;
            padding: 25px;
            box-sizing: border-box;
            float: left;
        }

        .container {
            height:700px; 
            border-bottom:1px solid #000;
        }

        .footer {
            height:700px; 
            background:#ffe000;
        }
    </style>
</head>
<body>
<div class="container">
<br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br> <br><br><br>
  <div class="sticky_div"></div>
   <div class="woocommerce-tabs">
   Content
   </div>


</div>
<div class="footer"></div>
</body>
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
    $(window).scroll(function(){ 

        var window_top = $(window).scrollTop();
        var stickyHeaderTop = $('.sticky_div').offset().top;
        var footer_offset = $(".footer").offset().top;
        var woocommerce_tabs = $(".woocommerce-tabs").offset().top;
        var woocommerce_element_height = 150;


        if(window_top +woocommerce_element_height > footer_offset ){
            $('.woocommerce-tabs').css({'top' : ((window_top +woocommerce_element_height -footer_offset) * -1)});
        }
        else if(window_top  > stickyHeaderTop ) {
            $('.woocommerce-tabs').addClass("sticky");
            $('.woocommerce-tabs').css({'top' : 0});
        } else {
            $('.woocommerce-tabs').removeClass("sticky");
        }


    });  
});

</script>
</html>

Answer

Leave a Reply Cancel reply