导航菜单不粘，有白色间隙[重复]

Posted 2023-03-06

【中文标题】导航菜单不粘，有白色间隙[重复]

【英文标题】：Navigational Menu Not Being Sticky, Has White Gap [duplicate]

【发布时间】：2020-01-29 05:43:08

【问题描述】：

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

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

由于我非常困惑，请有人帮助或指出正确的方向。

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>

【参考方案1】：

这可以解决您的问题，我将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*/

【讨论】：

请将您的（工作）代码添加到答案中。

【参考方案2】：

navigation 和 header 之间的边距问题是 <ul> 默认有边距。只需在 nav ul 的样式中添加 margin: 0; 即可。 您可以使用浏览器的开发人员工具轻松发现此类问题。它们会显示间距属于哪个元素。

关于粘性导航，其实有两个问题。

Most browsers (except Safari) 需要 position: sticky，而不是 -webkit-sticky。 position: stickydoes not work when the sticky element is inside a scrolling element（在你的情况下是<header>）。只需删除 <header> 元素即可产生所需的行为。要保留该元素，您可能还需要使其具有粘性。

---

这是一个工作版本：

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: sticky;
  position: -webkit-sticky;
  top: 0;


nav ul 
  text-align: center;
  list-style-type: none;
  margin: 0;


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*/

<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>


<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>

【讨论】：

谢谢@jmb。但是导航栏还是不粘？

完美，谢谢！

@PandaPlaysAll 不客气！ :) 对于未来的问题，请记住不要发布您的整个代码，而只是一个显示您的问题的最小示例。到时候你会得到更多更好的答案。

【参考方案3】：

你得到的差距是ul元素默认css值，即

ul 
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;

所以要解决您的问题，您可以更新您的 css：

nav ul 
  text-align: center;
  list-style-type: none;
  margin: 0;