Question

我试图拥有一个＆＃34;标题＆＃34; 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();
});

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

1 个答案: