为什么不定位:我的标题上的粘性工作? [英] Why doesn't position: sticky work on my header?

查看：30
本文介绍了为什么不定位:我的标题上的粘性工作?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我使用 position:sticky; 作为我的标题，但它似乎不起作用.错误是当我向下滚动时导航栏没有保持原位，就像设置 position:sticky 一样.

* {边距:0px；}导航{宽度:100%；背景颜色:白色；box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32);}#导航 {列表样式类型:无；填充:0px；边距:0px；}李{显示:内联块；填充:0px；字体系列:安东尼奥；字体大小:3em；padding-left: 5px;padding-right: 5px;填充顶部:2px；填充底部:2px；右边距:2px；}李阿{文字装饰:无；颜色:#33C4C4；过渡:0.5s；}li a:悬停{颜色:黑色;过渡:0.5s；}#dropdown-other {显示:无；z-索引:1；位置:绝对；背景颜色:白色；边框:#33C4C4 1.5px 实心；边框半径:10px；右边距:5px；}#dropdown-other a {颜色:#33C4C4；文字装饰:无；显示:块；字体大小:0.5em；文本对齐:居中；}#dropdown-other a:hover {颜色:黑色;}#other:hover #dropdown-other {显示:块；}@media(最大宽度:790px){.nav-section {显示:无！重要；}#扩张 {显示:内联块！重要；}.overflowDropdown {显示:阻止！重要；}}

<nav style="position: sticky; position: -webkit-sticky; top: 0px; z-index: 10;"><a href="#"><img src="Images/logo.png" id="logo" title="LOGO"/></a><ul align="right" id="navigation"><li><a class="nav-section" href="#" title="HOME PAGE">HOME</a></li><li><a class="nav-section" href="#" title="SHOP PAGE">SHOP</a></li><li><a class="nav-section" href="#" title="PEOPLE PAGE">PEOPLE</a></li><li><a class="nav-section" href="#" title="ABOUT PAGE">ABOUT</a></li><li id="其他"><a href="#" title="其他页面">其他</a><div id="dropdown-other"><div class="overflowDropdown"><a href="#">HOME</a><a href="#">SHOP</a><a href="#">PEOPLE</a><a href="#">关于</a>
<a href="#">联系方式</a><a href="#">FEED</a><a href="#">BOARD</a><a href="#">变更日志</a>

</nav>

<p style="margin-top: 700px;">test</p>

解决方案

那是因为 div 将它包围起来.您的选择:

  • 如图所示使 父 div 具有粘性.
  • 移除 div 和 nav 会很粘(因为没有父容器).
  • 如果需要 div，请将 nav 从 div 中取出.

* {边距:0px；}导航{宽度:100%；背景颜色:白色；box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32);z-索引:10；}#导航 {列表样式类型:无；填充:0px；边距:0px；}李{显示:内联块；填充:0px；字体系列:安东尼奥；字体大小:3em；padding-left: 5px;padding-right: 5px;填充顶部:2px；填充底部:2px；右边距:2px；}李阿{文字装饰:无；颜色:#33C4C4；过渡:0.5s；}li a:悬停{颜色:黑色;过渡:0.5s；}#dropdown-other {显示:无；z-索引:1；位置:绝对；背景颜色:白色；边框:#33C4C4 1.5px 实心；边框半径:10px；右边距:5px；}#dropdown-other a {颜色:#33C4C4；文字装饰:无；显示:块；字体大小:0.5em；文本对齐:居中；}#dropdown-other a:hover {颜色:黑色;}#other:hover #dropdown-other {显示:块；}@media(最大宽度:790px){.nav-section {显示:无！重要；}#扩张 {显示:内联块！重要；}.overflowDropdown {显示:阻止！重要；}}

<div style="position:-webkit-sticky;position:sticky;top:0px;"><导航><a href="#"><img src="Images/logo.png" id="logo" title="LOGO"/></a><ul align="right" id="navigation"><li><a class="nav-section" href="#" title="HOME PAGE">HOME</a></li><li><a class="nav-section" href="#" title="SHOP PAGE">SHOP</a></li><li><a class="nav-section" href="#" title="PEOPLE PAGE">PEOPLE</a></li><li><a class="nav-section" href="#" title="ABOUT PAGE">ABOUT</a></li><li id="其他"><a href="#" title="其他页面">其他</a><div id="dropdown-other"><div class="overflowDropdown"><a href="#">HOME</a><a href="#">SHOP</a><a href="#">PEOPLE</a><a href="#">关于</a>

<a href="#">联系方式</a><a href="#">FEED</a><a href="#">BOARD</a><a href="#">变更日志</a>

</nav>

<p style="margin-top: 700px;">test</p>

I am using position: sticky; for my header, but it does not seem to work. The error is that the navigation bar doesn't stay in place when I scroll down, like it should with position: sticky set.

* {
  margin: 0px;
}

nav {
  width: 100%;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32);
}

#navigation {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

li {
  display: inline-block;
  padding: 0px;
  font-family: Antonio;
  font-size: 3em;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-right: 2px;
}

li a {
  text-decoration: none;
  color: #33C4C4;
  transition: 0.5s;
}

li a:hover {
  color: black;
  transition: 0.5s;
}

#dropdown-other {
  display: none;
  z-index: 1;
  position: absolute;
  background-color: white;
  border: #33C4C4 1.5px solid;
  border-radius: 10px;
  margin-right: 5px;
}

#dropdown-other a {
  color: #33C4C4;
  text-decoration: none;
  display: block;
  font-size: 0.5em;
  text-align: center;
}

#dropdown-other a:hover {
  color: black;
}

#other:hover #dropdown-other {
  display: block;
}

@media (max-width: 790px) {
  .nav-section {
    display: none !important;
  }
  #expand {
    display: inline-block !important;
  }
  .overflowDropdown {
    display: block !important;
  }
}

<div>
  <nav style="position: sticky; position: -webkit-sticky; top: 0px; z-index: 10;">
    <a href="#">
      <img src="Images/logo.png" id="logo" title="LOGO" />
    </a>
    <ul align="right" id="navigation">
      <li><a class="nav-section" href="#" title="HOME PAGE">HOME</a></li>
      <li><a class="nav-section" href="#" title="SHOP PAGE">SHOP</a></li>
      <li><a class="nav-section" href="#" title="PEOPLE PAGE">PEOPLE</a></li>
      <li><a class="nav-section" href="#" title="ABOUT PAGE">ABOUT</a></li>
      <li id="other">
        <a href="#" title="OTHER PAGES">OTHER</a>
        <div id="dropdown-other">
          <div class="overflowDropdown">
            <a href="#">HOME</a>
            <a href="#">SHOP</a>
            <a href="#">PEOPLE</a>
            <a href="#">ABOUT</a>
          </div>
          <a href="#">CONTACT</a>
          <a href="#">FEED</a>
          <a href="#">BOARD</a>
          <a href="#">CHANGELOG</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

<p style="margin-top: 700px;">test</p>

解决方案

That's because of the div enclosing it around. Your alternatives:

* {
  margin: 0px;
}

nav {
  width: 100%;
  background-color: white;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .32);
  z-index: 10;
}

#navigation {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

li {
  display: inline-block;
  padding: 0px;
  font-family: Antonio;
  font-size: 3em;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-right: 2px;
}

li a {
  text-decoration: none;
  color: #33C4C4;
  transition: 0.5s;
}

li a:hover {
  color: black;
  transition: 0.5s;
}

#dropdown-other {
  display: none;
  z-index: 1;
  position: absolute;
  background-color: white;
  border: #33C4C4 1.5px solid;
  border-radius: 10px;
  margin-right: 5px;
}

#dropdown-other a {
  color: #33C4C4;
  text-decoration: none;
  display: block;
  font-size: 0.5em;
  text-align: center;
}

#dropdown-other a:hover {
  color: black;
}

#other:hover #dropdown-other {
  display: block;
}

@media (max-width: 790px) {
  .nav-section {
    display: none !important;
  }
  #expand {
    display: inline-block !important;
  }
  .overflowDropdown {
    display: block !important;
  }
}

<div style="position: -webkit-sticky;position: sticky;top: 0px;">
  <nav>
    <a href="#">
      <img src="Images/logo.png" id="logo" title="LOGO" />
    </a>
    <ul align="right" id="navigation">
      <li><a class="nav-section" href="#" title="HOME PAGE">HOME</a></li>
      <li><a class="nav-section" href="#" title="SHOP PAGE">SHOP</a></li>
      <li><a class="nav-section" href="#" title="PEOPLE PAGE">PEOPLE</a></li>
      <li><a class="nav-section" href="#" title="ABOUT PAGE">ABOUT</a></li>
      <li id="other">
        <a href="#" title="OTHER PAGES">OTHER</a>
        <div id="dropdown-other">
          <div class="overflowDropdown">
            <a href="#">HOME</a>
            <a href="#">SHOP</a>
            <a href="#">PEOPLE</a>
            <a href="#">ABOUT</a>
          </div>
          <a href="#">CONTACT</a>
          <a href="#">FEED</a>
          <a href="#">BOARD</a>
          <a href="#">CHANGELOG</a>
        </div>
      </li>
    </ul>
  </nav>
</div>

<p style="margin-top: 700px;">test</p>

这篇关于为什么不定位:我的标题上的粘性工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆