javascript - 页眉不在原地

Question

我通过使用

将我的页面标题定位为始终位于顶部

  position:fixed;

这工作得很好，但在我的 Android 设备上的 Chrome 上却不行。页眉被某些东西推开并放置在不应该放置的位置:距顶部 100 像素而不是距顶部 0 像素。

我猜这是因为我使用了一些 javascript。第一段 javascript 是当用户按下一个图标时出现一个菜单，这是代码:

 <script type="text/javascript">
    $(document).ready(function() {
        $('#toggle').click(function(){
            $('div.showhide').toggle();

        });
    });
</script>

第二个代码是当用户滚动离开标题时标题关闭:

    <script type='text/javascript'>//<![CDATA[ 
      $(window).load(function(){
      $(window).scroll(function() {   $('.showhide').fadeOut("fast");
      });
      });//]]>  
    </script>

这是我的页面代码:

<div class="showhide">
    <div class="menubg">
        <div class="menu">
            <div class="container">
                <div class="item">
                    <div class="img">
                        <a href="conv.cfm" style="color: white; text-decoration: none;"><img style="margin-top: 8px;"  src="img/conversations.png" alt="conversations" />
                    </div>
                    <p>Gesprekken</a></p>
                </div>
                <div class="item">
                    <div class="img">
                        <a href="home.cfm" style="color: white; text-decoration: none;">            <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-left: 23px;" class="nav left" />
                    </div>
                    <p>Vrienden</a></p>
                </div>
                <div class="item">
                    <div class="img">
                        <a href="profile.cfm" style="color: white; text-decoration: none;"><img src="img/hoofd.png" alt="me" />
                    </div>
                    <p>Ik</a></p>
                </div>
                <div class="clear"></div>
                <div class="item">
                    <div class="img">
                        <img src="img/HC.gif" alt="reception" />
                    </div>
                    <p>Receptie</p>
                </div>
                <div class="item">
                    <div class="img">
                            <a href="settings.cfm" style="color: white; text-decoration: none;"><img src="img/wrench.gif" alt="settings" />
                    </div>
                    <p>Instellingen</p></a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="headbg">
    <div class="header">
        <a href="#">
            <img src="img/conversations.png" alt="conversations" class="nav left" />
        </a>
        <a href="#">
            <img src="img/high_res.png" alt="notifications" style="height: 38px; margin-top: -1px;" class="nav left" />
        </a>
        <a href="#">
            <img src="img/habbobtn.png" alt="habbologo" class="nav right" id="toggle" />
        </a>
    </div>
</div>


<div class="content">
   </div>
   // Page continues after this but it isn't causing the problem

忘记添加了，但这是我的 css 代码:

.menubg {
width: 100%;
background-color: #201d19;
}
  .menu {
width: 320px;
height: 190px;
margin: 0 auto;
overflow: hidden;
   }
  .showhide {
display: none;
   }
  .container {
width: 290px;
height: 160px;
background-color: #201c18;
border: 1px solid #282420;
border-radius: 5px;
position: absolute;
padding: 5px;
margin: 10px;
   }
   // This is not all the css, if it's needed i'll add it

如果有人能帮我解决这个问题，我将不胜感激!

Answer 1

我创建了一个示例 fiddle带有标题和内容部分。

#header
{
position:fixed;
...
    top:0;
    left:0;
}
#content
{
margin-top:set your header height;
}