Question

我已经将页面的标题定位为使用

始终位于顶部

  position:fixed;

这完全没问题，但在Android设备上的Chrome上却没有。标题被一些东西推开并被放置在它不应该的位置：距离顶部几百个像素而不是顶部的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

我已经使用标题和内容div创建了一个示例fiddle。

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

标题没有留在原地

1 个答案: