How to create sticky headers inside responsive width divs?

Question

I have two "boxes" in a sidebar with responsive widths. I need the headers to be sticky and the content scrollable. If I try to use position:fixed on the headers, I run into the issue where they lose their responsive width/background color.

Here's a jsfiddle of one of the boxes: http://jsfiddle.net/4tadzk7x/

HTML:

<aside class="sidebar col-xs-3 pull-right">
    <div class="box-with-header queries">
        <div class="header-fixed">
            <h5 class="headline">Headline</h5>
        </div>
        <div class="content">
            <ul class="item no-bullets red">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />

            <ul class="item no-bullets blue">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />

            <ul class="item no-bullets yellow">
                <li>Text Content</li>
                <li>Text Content</li>
                <li>Text Content</li>
            </ul>
            <hr />
        </div>
    </div>
</aside>

I think this will help you in some way.... http://stackoverflow.com/questions/19158559/how-to-fix-a-header-on-scroll — Murali Krishna, Aug 26 '14 at 14:30

Moshtaf · Accepted Answer · 2014-08-26T15:39:29.533

1

Add this two classes:

.header-fixed{
    position:fixed;
    width:100%;
}

.content{
    padding-top:45px;
}

Check JSFiddle Demo

Update:

If width isn't always 100% so you can simply move header div ans and modify your HTML code like this:

<aside class="sidebar col-xs-3 pull-right">
    <div class="header-fixed">
        <h5 class="headline">Headline</h5>
    </div>
    <div class="box-with-header queries">
        <div class="content">
            //content ...
        </div>
    </div>
</aside>

Check JSFiddle Demo

edited Aug 26 '14 at 15:39

answered Aug 26 '14 at 14:36

Moshtaf

4,833
2
24
34

The width:100% makes the header go past the containing box. In your JSFiddle example you can see the gray background on the header go past the result box border. – astone Aug 26 '14 at 14:57
@astone: is there any reason that just don't move header div to the top of code in HTML? check this JSFiddle: http://jsfiddle.net/4tadzk7x/7/ – Moshtaf Aug 26 '14 at 15:14

score 0 · Answer 2 · answered Aug 26 '14 at 14:40

0

Use width: 100% and top: 0 on .header-fixed

Then this:

.box-with-header.queries {
  max-height: 250px;
  height: 250px;
  margin-top: 3em;
}

FIDDLE

answered Aug 26 '14 at 14:40

Riskbreaker

4,621
1
23
31

I don't want the header to go to the top of the browser window. I just want it to remain in place inside of the div with class"box-with-header queries". I have multiple "box-widh-header" divs on the page and need them all to have sticky headers inside their boxes. – astone Aug 26 '14 at 15:03
The boxes have heights dynamically being generated by javascript, so the content inside them (in the
– astone Aug 26 '14 at 15:05

score -1 · Answer 3 · answered Aug 26 '14 at 14:30

-1

I am not sure if I understand your problem correctly. But if you want headers to be fixed and responsive. Give it position fixed and width 100%. That should do it.

Updated fiddle : http://jsfiddle.net/4tadzk7x/1/

.headline {
  background: red;
  padding: 10px;
  margin: 0 0 8px 0;
  text-transform: uppercase;
  font-size: 13px;
  position:fixed;
  top:0;
  width:100%;
}

You also need to add margin-top to content so that it doesn't overlap with the header.

div.content{
     margin-top:40px;
}

answered Aug 26 '14 at 14:30

Vishwanath

6,284
4
38
57

Header is fixed in relation to the page, not in relation to the responsive width div. Observe http://jsfiddle.net/4tadzk7x/2/ – BenjaminRH Aug 26 '14 at 14:33
It was not mentioned in the question but I think I should have guessed that, even in that case this solution is not incorrect but incomplete... Can add javascript for scroll events and conditional fixed positioning for making it complete... But I still doubt that OP really looking for conditional fixed header... – Vishwanath Aug 26 '14 at 14:36

How to create sticky headers inside responsive width divs?

3 Answers3