2

Simple page with 2 level header, where 2nd level sticks to top.

Here is the page skeleton: http://jsbin.com/cimobirimisi/9

If you re-size your browser to around 630px of height and try to scroll down, you should notice scroll glitch. Not a problem in IE9, but Chrome and Firefox seems to be affected.

Any help is appreciated :)

cvrebert
  • 9,075
  • 2
  • 38
  • 49
user2174835
  • 357
  • 3
  • 11

1 Answers1

2

You can offset the .content div when the header has the .affix class is applied:

.header2.affix + .content {
  margin-top: 82px;
}

Tested in FF32 and CH37 (Don't have IE9 VM on this PC, sorry)

Demo: http://jsbin.com/cimobirimisi/15/

Some Background:

The issue is that once the .affix class is applied, the .header2 div inherits position: fixed. This brings the .header.affix div out of its place in the DOM causing the .content div to immediately snap to the top of the page and be hidden beneath (the now fixed) .header2 div.

NotJustClarkKent
  • 1,078
  • 1
  • 11
  • 25