我有一个固定位置的元素:
.woocommerce #content div.product div.summary {
position: fixed;
right: 15%;
padding: 20px;
background-color: #ccc;
width: 25%;
}
我想做的是让元素在页脚之前停止,我尝试了以下方法:
$(document).scroll(function (){
if($('.woocommerce #content div.product div.summary').offset().top + $('.woocommerce #content div.product div.summary').height() >= $('footer').offset().top - 10){
$('.woocommerce #content div.product div.summary').css('position', 'absolute');
}
if($(document).scrollTop() + window.innerHeight < $('footer').offset().top){
$('.woocommerce #content div.product div.summary').css('position', 'fixed');
}
});
但我遇到了一些奇怪的行为,例如,它直接到顶部并且元素的宽度变得更小,我不知道如何修复它。
这是我的页面,我正在尝试在...
最佳答案
避免页脚超过 div.summary 的一种方法是在页脚上添加边距顶部,这是该 div 的高度。
#footer {
margin-top: 500px;
}
关于jquery - 在页脚不起作用之前停止固定位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57998445/