Question

我想让我的导航菜单对齐，这样它在页面加载时不会重叠，但在向下滚动时会重叠（动态导航栏）

我现在拥有的是：https://m.omegarealm.tk/ 正如您在页面的初始加载中看到的那样，条形图与文本重叠，我希望导航栏在加载页面时不与文本重叠，但在滚动时重叠。

我目前的CSS在这里：https://files.omegarealm.tk/mobile.css

快速注意：当您访问CSS时，CSS是一行，因为cloudflare压缩它。它在服务器上缩进。

谢谢！

Answer 1

因为元素是固定的，所以与它下面的内容无关。包裹身体内容并在顶部应用边距：

＆＃13;

var navHeight = $('#navbar').height() + 30;
$('section').css('marginTop', navHeight);

＆＃13;

#navbar {

  background-color: red;

  left: 0;

  position: fixed;

  top: 0;

  width: 100%;

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="navbar">
  <img width="32px" height="32px" align="left" style="padding: 5px;" src="//files.omegarealm.tk/images/menu_mobile.png">
  <font size="5">
<b>
OmegaRealm
</b>
</font>
</div>

<section style="height: 2000px">
  <h1>Under construction</h1>
  <p>Sorry, please come back later</p>
</section>

＆＃13;

Answer 2

这里不需要任何JavaScript。您的“导航栏”元素似乎是一个固定的高度，因此您只需将body的上边距设置为等于该高度，再加上一点额外内容就可以实现您想要的效果，这样您的内容就会直接位于固定元素的边缘。

body{
    height:5000px;
    margin:52px 10px 10px;
}
#navbar{
    background:red;
    left:0;
    position:fixed;
    top:0;
    width: 100%;
}
#navbar img{
    float:left;
    margin:5px;
}
#navbar p{
    font-weight:bold;
    line-height:42px;
    margin:0;
    text-align:center;
}

<div id="navbar">
    <img alt="Menu" height="32" src="//files.omegarealm.tk/images/menu_mobile.png" width="32">
    <p>OmegaRealm</p>
</div>
<h1>Under construction</h1>
<p>Sorry, please come back later</p>

如何对齐元素以便CSS固定在页面加载时不重叠

2 个答案: