CSS :: Fixed header without setting position:fixed
Question
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.
3 answers
solution1
1 2014-04-26 05:11:22
嘿jesper，您是否使用position：relative与position：abosulte并固定，就像您要修复标题一样，则必须同时使用这三个标题，也许您也必须使用z-index，否则您的网站会出现问题内容，如果他们有..您能给我们适当的jsfiddle以便我们可以帮助..因为我看不到任何东西而不是标题..所以要固定位置，您也需要其他部分.. PS我想帮助我告诉我我会尝试.. :)
solution2
0 2014-04-26 01:27:08
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>
solution3
0 2014-04-26 01:35:11
Place top:0; at your header css remove position:fixed;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.