0

我已通过使用将页面的标题始终位于顶部

  position:fixed;

这工作得很好，但在我的安卓设备上的 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

如果有人可以帮助我解决这个问题，我将不胜感激！

4

1 回答 1

0

我创建了一个带有标题和内容 div的示例小提琴。

#header
{
position:fixed;
...
    top:0;
    left:0;
}
#content
{
margin-top:set your header height;
}
于 2013-04-05T14:29:44.303 回答