Javascript 如何基于父元素设置具有固定位置的div百分比宽度

我正在使用Wordpress，当页面滚动时，我需要在顶部固定一个div。出于响应原因，div（.details）必须具有百分比宽度。我找到了一个javascript，当div（.details）距离顶部40px时停止它，将其从相对位置切换到固定位置。当处于相对位置时，它的宽度为25%，但当它变为固定时，25%的宽度现在基于窗口，而不是基于比窗口小的父元素（.entry），因此当我滚动时，它会变大。这些是CSS和Javascript（.carousel是.entry中的另一个div，位于.details的左侧）：

.entry{位置：相对；宽度：100%；}
.carousel{width:70%；height:auto；position:relative；float:left；margin top:0px；}
.details{宽度：25px；高度：100%；浮动：右侧；页边距顶部：0px；线条高度：20px；}
$（窗口）。滚动（函数（）{
如果（$（窗口）.scrollTop（）>=90）{
$（'.details'）.css（{position:'fixed'，right:40，top:40，width:'25%}）；
}否则{
$（'.details'）.css（{position:'relative'，right:0，top:0，width:'25%}）；
}
});

我需要根据.entry而不是窗口来设置.details div的宽度。 任何人都可以发现错误或需要其他东西？我不是Javascript方面的专家。

---

谢谢大家!

唯一的方法是使用JavaScript设置

.details

宽度。试试这个：

$(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 )

})

---

这里有一个问题：无法使固定元素相对于其父元素。它将始终相对于窗口。您可以使用JavaScript设置宽度，但随后必须附加一个事件侦听器窗口大小更改。您应该创建一个JSFIDLE或为我们提供一个指向示例的链接。您不希望菜单的宽度为窗口的100%有什么原因吗？这是网站：。如您所见，右侧有一个文本框（.details）。当你滚动页面时，它会变大。该框不是100%，因为左侧有另一个框（.carousel）用于图像。我要准备小提琴。我希望我明白了。这是一个完美的解决方案！我试着在jsfiddle和blank网页上使用它，但效果很好。但当我把它放在Wordpress上时，它没有。可能是为了与jQuery冲突。这是正确的解决方案，您有解决冲突问题的建议吗？非常感谢。试着看看JavaScript控制台，告诉我它是怎么说的。我希望我在正确的位置（在Chrome>element inspector>console上）检查了一下，这就是它所说的：未捕获的语法错误：意外标记$(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 ) })