0

I'm trying to have a "header" div fixed, when it's scrolled position hits the top of the browser. Of course that takes it out of document flow, so it will require a set width. This works fine is the container's width is set to a specific value. But if the container is fluid, such as [ min-width: 300px; max-width: 500px; ] then the whole thing falls apart.

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

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
noy-hadar
  • 169
  • 1
  • 12
  • When you set an elements position to fixed, essentially it has no parent--it's taken out of the normal dom flow so to speak. You may need to resort to javascript to get and set the correct width. – Ted Feb 05 '15 at 20:52
  • Setting [width:inherit] works if that inheritance is a fixed value. So lastly, I guess I need a solution to have it set to a changing/fluid width of it's parent. ie. updating that width in real time. – noy-hadar Feb 05 '15 at 21:06
  • Your question reminded me about another one recently asked -> http://stackoverflow.com/questions/27982966/how-can-i-make-a-fixed-positioned-div-inherit-width-of-parent#answer-27983056. It should help you to sort you problem if you move your `#logo_banner` inside the `#container` – Morpheus Feb 06 '15 at 17:50

1 Answers1

0

You need to use jquery to set the width relative to the containing div. For example change your existing code to read:

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

Because the width will be a fixed px size, you'll need to reset the width anytime #container changes width. Assuming this is a responsive design this should only change when the window size changes, so we can run something like this:

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

If we're practicing DRY (Don't Repeat Yourself) programming you could move this into a separate function eg:

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

Then as you scroll just call the function after you set the banner_fixed class

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

   set_banner_width();
...

And the same on window resize

$(window).resize(function(){
   set_banner_width();
});
Tim S
  • 25
  • 4