我正在使用Wordpress，滚动页面时需要在顶部固定一个div。出于响应原因，div（.details）必须具有百分比宽度。我发现了一个JavaScript，可以在div（.details）距顶部40px时停止它，将其从相对位置切换到固定位置。当处于相对位置时，它的宽度为25％，但是当固定后，它的宽度为25％是基于窗口的，而不是基于父元素（.entry），它小于窗口，所以当我滚动时，它会变大。这些都是CSS和JavaScript（.carousel是里面的其他分区.entry，这是对.details左）：
<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的宽度。任何人都能发现错误或需要其他东西吗？我不是Java专业人士。谢谢你们！
唯一的方法就是通过.detailsJavaScript设置宽度。尝试这个：
$(window).scroll(function(){
if($(window).scrollTop() >= 90){
$('.details').css({position:'fixed',right:40,top:40});
} else {
$('.details').css({position:'relative',right:0,top:0});
}
});
// set the width of the details div when window resizes
window.addEventListener('resize', function(){
var $el = $('.details')
$el.width( $el.parent().outerWidth() * .25 )
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句