我正在处理 Wordpress 并需要使一个 div 在页面滚动时固定在顶部。该 div (.details) 必须具有百分比宽度以实现响应式设计。我找到了一段 javascript,当距离顶部40像素时,停止 div (.details) 的相对位置,并将其转换为固定位置。当处于相对位置时,它的宽度为 25%,但是当它变为固定位置时,25% 的宽度现在基于窗口而不是父元素(.entry),该元素小于窗口,因此当我滚动时它会变大。以下是 CSS 和 Javascript 的代码(.carousel 是 .entry 内另一个 div,在左侧):
<style>
.entry { position:relative; width:100%; }
.carousel { width:70%; height: auto; position: relative; float: left; margin-top: 0px;}
.details { width: 25px; height: 100%; float: right; margin-top: 0px; line-height: 20px;}
</style>
<script>
$(window).scroll(function(){
if ($(window).scrollTop() >= 90){
$('.details').css({position:'fixed',right:40,top:40,width:'25%'});
} else {
$('.details').css({position:'relative',right:0,top:0,width:'25%'});
}
});
</script>
我需要根据.entry而不是窗口大小来设置.details div的宽度。 有人发现错误或需要其他东西吗?我不是Javascript专业人员。 谢谢大家!