设置固定的 div 宽度以继承父级的流体宽度

Question

我正在尝试修复一个“标题”div，当它的滚动位置到达浏览器顶部时。当然，这会将其排除在文档流之外，因此需要设置宽度。这很好用，因为容器的宽度设置为特定值。 但是如果容器是流动的，比如[ min-width: 300px;最大宽度：500px； ] 然后整个事情就崩溃了。

CSS

#container{
    min-width: 300px; max-width: 500px;
    background: #FFC;    }
#wrapper {

    /* width:500px; <= this works */ 

    width:100%; /* this does not work*/  

    border: solid 1px red;    }
#logo_banner {
    width: inherit;
    border: solid 1px red;    }
.banner_fixed {
    position:fixed;
    top:0;    }

HTML

<div id="container">

    <div id="wrapper">
        <div id="logo_banner">
            Banner Here
        </div>
    </div>

</div>

JSFIDDLE

Answer 1

您需要使用 jquery 来设置相对于包含 div 的宽度。 例如，将您现有的代码更改为：

if (y >= top) {
   $('#logo_banner').addClass('banner_fixed');
   $('#logo_banner').width($('#container').width());
} else {
   $('#logo_banner').removeClass('banner_fixed');
   $('#logo_banner').width('100%');
}

因为宽度将是固定的 px 大小，所以您需要在 #container 更改宽度的任何时候重置宽度。假设这是一个响应式设计，这应该只在窗口大小改变时才会改变，所以我们可以运行这样的东西：

// Trigger when window size is changed
$(window).resize(function(){
   // Only trigger if the element is fixed
   if (#logo_banner.hasClass('banner_fixed')) {
      $('#logo_banner').width($('#container').width());
   }
});

如果我们正在练习 DRY（不要重复自己）编程，您可以将其移至单独的函数中 例如：

function set_banner_width(){
   if ($('#logo_banner').hasClass('banner_fixed')) {
      $('#logo_banner').width($('#container').width());
   } else {
      $('#logo_banner').width('100%');
   }
};

然后，当您滚动设置banner_fixed 类后调用该函数

...
   if (y >= top) {
      $('#logo_banner').addClass('banner_fixed');
   } else {
      $('#logo_banner').removeClass('banner_fixed');
   }

   set_banner_width();
...

在调整窗口大小时也是如此

$(window).resize(function(){
   set_banner_width();
});