javascript - 导航菜单不粘,有白色间隙

标签 javascript html css

您好,我正在尝试删除导航栏和标题之间的空白区域。但是,正文的边距和填充已经设置为 0,我已经为整个文档设置了它 (*)。 此外,我正在尝试使导航栏具有粘性。滚动并停留在文档的顶部,一旦您滚动到初始顶部:0。 我已经按照在线教程进行操作,但没有用...

我正在尝试创建的网站类似于 Mineplex.com,这是一个流行的 Minecraft 网站。 但出于某种原因,标题和导航栏之间存在空白,并且导航栏没有保持粘性。

有人可以帮助我或指出正确的方向吗,因为我非常困惑。

body {
    height: 5048px;
  /*  background-color: #f1f1f1; */
    padding: 0;
    margin: 0;
}

.header--main {
    height: 300px;
background-color: purple;
}



nav {
    width: 100%;
    height: 50px;
 /*   background-image: linear-gradient(to bottom, #4c45b2, #25accf);*/
background-color: red;
    position: -webkit-sticky;
    top: 0;
}

nav ul {
    text-align: center;
    list-style-type: none;
}

nav ul li {

    display: inline-block;
}

nav ul li a {
    text-decoration: none;
    display: block;
    padding: 14px 28px;
    font-size: 16px;
    color: white;
    font-weight: bold;
    font-family: 'Open Sans', sans-serif;
}

nav ul li a:active {
    background-color: white;
    color: #484848;
}

nav ul li a:hover {
    background-color: white;
    color: #484848;
}

/*Make navbar font to open sans*/
    <header>
        <div class="header--main">



        </div>
        <nav class="sticky">
            <ul>
                <li><a href=”./index.html”>Home</a></li>
                <li><a href=”#”>Registration</a> </li>
                <li> <a href=”#”>Order</a></li>
                <li> <a href=”#”>Features</a></li>
            </ul>
        </nav>
    </header>

<article>
    <section>

        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.



    </section>


</article>

最佳答案

这可以解决您的问题,我将 nav 移出您的 header 并且效果很好:

https://codepen.io/eytienne/pen/WNeBYdQ

<header>
</header>
<nav class="sticky">
  <ul>
    <li><a href=”./index.html”>Home</a></li>
    <li><a href=”#”>Registration</a> </li>
    <li> <a href=”#”>Order</a></li>
    <li> <a href=”#”>Features</a></li>
  </ul>
</nav>
<article>
  <section>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </section>

</article>
body {
  height: 5048px;
  /*  background-color: #f1f1f1; */
  padding: 0;
  margin: 0;
}

header {
  height: 300px;
  background-color: purple;
}

nav {
  width: 100%;
  height: 50px;
  background-color: red;
  position: sticky;
  top: 0;
}

nav ul {
  text-align: center;
  list-style-type: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
  display: block;
  padding: 14px 28px;
  font-size: 16px;
  color: white;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
}

nav ul li a:active {
  background-color: white;
  color: #484848;
}

nav ul li a:hover {
  background-color: white;
  color: #484848;
}

/*Make navbar font to open sans*/

关于javascript - 导航菜单不粘,有白色间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58159251/

相关文章:

Javascript - 将 align= 转换为 float : 的方法

javascript - 如何在离开当前页面之前加载链接页面

javascript - 正确使用 async 和 wait

javascript - 鼠标悬停(显示内容)javascript

html - 旋转木马无法将图像 div 置于中心

html - div 从固定标题后面开始,而不是在标题下方,并且在用户滚动时在标题上方可见

html - 确保我的缩略图描述始终与缩略图的中间对齐?

javascript - 在 FTL 中向我的模型发送一个 javascript var

javascript - Window.postMessage() 问题

html - 从 html : BASH 中提取的子字符串