40

I am trying to create a very simple effect where the navigation sticks to the top of the page as you scroll down the page. All I should have to do is set "position: fixed" to the header, which I currently have. For some reason, it's treating it more like a "position: absolute" element vs. fixed. I tried it on other elements on the page with the same effect, so I must have something that in my HTML or CSS code that is causing the issue. Any ideas?

http://jsfiddle.net/apautler/yDhXG/1/embedded/result/

Header CSS

.nav-main  {overflow: visible; position: fixed;
            top: 0; left: 0; right: 0; height: 60px; width: 100%;}

Note, the site is responsive, so the position: fixed kicks in at 768px.

phihag
  • 278,196
  • 72
  • 453
  • 469
Andrew
  • 1,121
  • 4
  • 15
  • 24
  • Hmm. I just tried it in Firefox and it worked. Very strange. It still doesn't work for me in Safari or Chrome even after clearing the browser. Does it work for both of you in webkit browsers? Any idea what might be causing the issue? – Andrew Feb 06 '13 at 15:26
  • Not working for me, chrome v24. – Michael Feb 06 '13 at 15:29
  • I see the problem: Chrome 24 – Mooseman Feb 06 '13 at 15:31

1 Answers1

151

At the moment, Chrome cannot render position:fixed on elements under a transformation. Delete the (content-free)

-webkit-transform: translate3d(0, 0, 0);

and it will work.

phihag
  • 278,196
  • 72
  • 453
  • 469
  • 2
    You'll also find that `animation-fill-mode: both` on a/the parent container will stop `position: fixed` from working – superjaz1 Jul 10 '15 at 12:58
  • 3
    `will-change: transform;` also messes with `position: fixed;` elements. – MLM Jun 03 '16 at 01:28