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

Question

我试图让一个“头”div固定，当它的滚动位置击中浏览器的顶部。当然，这会使它脱离文档流，因此需要设置一个宽度。这很好，就是容器的宽度被设置为一个特定的值。但是如果容器是流体的，比如最小宽度:300 as；最大宽度:500 as；那么整个容器就会崩溃。。

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大小，所以在#容器更改宽度时，需要重新设置宽度。假设这是一个响应性设计，那么只有当窗口大小发生变化时，这才会发生变化，因此我们可以运行如下所示的内容：

// 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();
});