停止包裝盒底部邊框上的粘性盒子

我的網頁上有一個粘性盒子，它必須停止在包裝盒的底部邊框上，但我不知道該怎麼做。我認爲它非常基本和簡單，但我只是不知道如何。停止包裝盒底部邊框上的粘性盒子

希望有人能幫助我

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>

來源

2017-06-13 Mel. Ak.

嘗試此粘頁腳。

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

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

更新答案＃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>

更新答案＃2 我在這裏張貼的代碼，因爲它會很容易閱讀。這工作。

<!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>

來源

2017-06-13 11:43:26 divine

我不需要粘腳。 .sticky_div必須是粘性的，並且必須停止在容器的底部邊框 –

我會盡力做到這一點，你可以在codepen或jsfiddle ..etc中發佈你的整個代碼嗎？ – divine

這裏是一個jsfiddle https://jsfiddle.net/mqo9qcuL/ –

停止包裝盒底部邊框上的粘性盒子

回答

相關問題