Fixed header sur un site ("boxed layout")

Bonjour,
j'ai une div "page" qui contient tout le site en "boxed layout" (c'est à dire pas en pleine largeur).
J'ai une div header-text-nav-container que je souhaite positionner en "fixed".
Ensuite je souhaiterais faire passer le reste du site derrière cette div quand on scroll mais en sachant que le body a un padding-top de 30px.
J'arrive à faire passer le reste du site derrière la div header-text-nav-container mais le problème est que ça ne prend plus en compte le padding-top de 30px.

HMTL

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<body>
<div id="page">
<header id="masthead" class="site-header clearfix">
  <div id="header-text-nav-container">
    <div class="inner-wrap">
      <div id="header-text-nav-wrap" class="clearfix">
	  <div id="header-left-section">
		 <div id="header-logo-image">
			 <a href="http://....."><img src="http://...logo.png"></a>
		</div><!-- #header-logo-image -->
		<div id="header-text">
			<h1 id="site-title"> <a href=".....">Title</a> </h1>
		</div><!-- #header-text -->
		</div><!-- #header-left-section -->
		<div id="header-right-section">
               <nav id="site-navigation" class="main-navigation" role="navigation">
		[...]
               </nav>					
	       </div><!-- #header-right-section --> 
         </div><!-- #header-text-nav-wrap -->
    </div><!-- .inner-wrap -->
  </div><!-- #header-text-nav-container -->
  <section id="featured-slider">
		[...]	
 </section>
</header>

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body {
    padding-top: 30px;
    padding-bottom: 30px;
}
 
#page {
    max-width: 1268px;
    margin: 0px auto;
    background-color: #FFF;
}
 
#header-text-nav-container {
    border: 1px solid #F00;
    z-index: 999;
    position: fixed;
    background: none repeat scroll 0% 0% #FFF;
    display: inline-block;
}
 
.inner-wrap {
    margin: 0px auto;
    max-width: 1218px;
}

Quelqu'un peut m'aider sur ceci ?