如何在固定位置的情况下设置div百分比宽度，基于父元素

Question

我正在处理 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专业人员。 谢谢大家！

- Davide Giorgetta

---

无法使固定元素相对于其父元素。它将始终相对于窗口。您可以使用JavaScript设置宽度，但然后您必须附加一个事件侦听器以便在窗口大小更改时进行调整。 - Kevin Jantzer

你应该创建一个 JSFiddle 或者给我们提供一个示例链接。您不想让您的菜单宽度占满整个窗口是有什么原因吗？ - Kevin Jantzer

这是网站链接：http://www.davidegiorgetta.com/choos/。正如您所看到的，右侧有一个文本框（.details）。当您滚动页面时，它会变得更大。该框不是100％，因为左侧还有另一个框（.carousel）用于图像。我将准备好示例代码。希望我表述清楚。 - Davide Giorgetta

Answer 1

唯一的方法是使用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 )

})

Here's a crude example

- Kevin Jantzer

---

这是一个完美的解决方案！我尝试在jsfiddle和空白网页中使用它，它可以正常工作。但是当我将它放入WordPress中时，它就无法正常工作了。可能是与jQuery发生了冲突。这是正确的解决方案，您有解决冲突问题的建议吗？谢谢！ - Davide Giorgetta

尝试查看JavaScript控制台并告诉我它说了什么。 - Kevin Jantzer

我希望我在正确的地方进行了检查（在Chrome > 元素检查器 > 控制台）。这是它所说的：Uncaught SyntaxError: Unexpected token < www.davidegiorgetta.com/choos/:207 Uncaught TypeError: Property '$' of object [object Object] is not a function www.davidegiorgetta.com/choos/:220 Failed to load resource http://127.0.0.1:4001/isrunning 3459 - Davide Giorgetta

看起来你在第195行的<script>标签内部有一个段落标签：截图 - Kevin Jantzer

好了，终于成功了！只是几个自动段落位置不对而已！非常感谢Kevin Jantzer！ - Davide Giorgetta