CODEWITHSUNDEEP
jquerycsshtml
user20072008
user20072008

Reputation: 379

CSS :: Fixed header without setting position:fixed

I have a php page which includes header page(navigation bar). I want to display navigation bar as fixed header but whenever change its position to fixed, it removes scrollbars (horizantal and vertical) and I am not able to scroll the page. If I want to keep my header fixed and I don't want to make position fixed. How can I achieve this ?

headerpage.php :

     <div id="header" style="position:fixed;width:100%;height:100px;">
          <ul>
               <li>..... </li>
               <li>..... </li>
               <li>..... </li>
          </ul>
     </div>

anotherpage.php :

      <?php
              require("headerpage.php");
      ?>

      <body>
            some code....
      </body>

Since there are 2 pages, I have created jsFiddle for my headerpage.php.

http://jsfiddle.net/vVptE/

Upvotes: 0

Views: 2945

Answers (3)

Leo the lion
Leo the lion

Reputation: 3065

Hey jesper did u use position:relative with position:abosulte and fixed as if you want to fix your header then you have to use all of three and may be you have to use z-index too or else there will be probelm with your site content if they have so..can you please give us proper jsfiddle so we can help..as i cant see anything instead of header..so for doing position fixed you need other part too.. P.S. i want to help so tell me and i will try..:)

Upvotes: 1

chandu
chandu

Reputation: 2276

Place top:0; at your header css remove position:fixed;

Upvotes: 0

Andreas Storvik Strauman
Andreas Storvik Strauman

Reputation: 1655

jQuery.pin will achieve sticking elements, just like position:fixed;. Just download it, then implement it like this:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script>
<script type='text/javascript' src='path/to/jquery.pin-plugin'></script>
<script type='text/javascript'>
   $(function(){
       $("#header").pin();
   });
</script>

Upvotes: 0

Related Questions